div/span水平顶部对齐,同一行div跟内容最多的div高度保持一样高

一、两个div水平顶部对齐

两个div都设置display:inline-block;  并且右边的div增加样式vertical-align: top; 使得右边的div跟左边的div的顶部对齐。

<div id='left' style="width:20%; display:inline-block">
</div>
 
<div id='right' style="width: 80%; display:inline-block;vertical-align: top;">
</div>

二、两个span水平顶部对齐

<span>125网页设计</span> <span><img src="http://www.125jz.com/wp-content/uploads/2018/11/logo.png" /></span>

div/span水平顶部对齐

让两个span水平顶部对齐:

<span style="display:inline-block;">125网页设计</span> <span style="display:inline-block;vertical-align:top;"><img src="http://www.125jz.com/wp-content/uploads/2018/11/logo.png" /></span>

两个span水平顶部对齐

如果让上面两个span垂直居中对齐,可以把vertical-align的值设置为middle即可。

<span style="display:inline-block;">125网页设计</span> <span style="display:inline-block;vertical-align: middle;"><img src="http://www.125jz.com/wp-content/uploads/2018/11/logo.png" /></span>

两个span垂直居中对齐

三、同一行div跟内容最多的div高度保持一样高

<style>
   div{float:left;}
</style>
<div>内容多</div>
<div>内容少</div>

解决方法:在所有div外面套个div,然后把overflow设置为hidden,并对内部div设置margin-bottom:-10000px;padding-bottom:10000px;

<style>
#main{overflow:hidden;zoom:1;}
#left,#right{ float:left;margin-bottom:-10000px;padding-bottom:10000px; border:1px solid #090; width:200px; }
</style>
<div id="main">
<div id="left">
  <p>1行内容</p>
  <p>2行内容</p>
  <p>3行内容</p>
  <p>4行内容</p>
  <p>5行内容</p>
</div>
<div id="right">内容少</div>
</div>

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/2908.html

(0)
江山如画的头像江山如画管理团队
上一篇 2018年12月4日 下午3:25
下一篇 2018年12月11日 下午2:56

99%的人还看了以下文章

  • Dedecms的tplcache文件夹是什么,可以删除吗?

    tplcache是DeDeCMS里data目录下的模板缓存数据,时间久了就会积累成千上万的文件,而且会越来越大。dede模板缓存可以加快网页文件的生成速度,关闭的话,理论上说除了生成速度变慢之外没什么影响。tplcache文件夹是可以删除的。

    2023年3月19日
    1.0K0
  • 第7课:HTML标签的属性

    许多元素都可以设置属性。 属性是什么? HTML通过标签告诉浏览器如何展示网页(比如告诉浏览器显示一个换行)。你可以为某些元素附加一些信息,这些附加信息被称为属性(attribute)。例1: <h2 style=”background-color: #ff0000;”>上125jz.com学网页制作</h2> 属性应写在元素的首标签…

    2018年1月20日
    2.3K0
  • 第4课:字体

    这一课,你将学习字体以及如何用CSS来设置字体。我们还会考虑如何解决“网站所选的字体仅当访问者的PC上安装有该字体时才会被显示”这一难题。本课将对下列CSS属性进行讲解: font-family font-style font-variant font-weight font-size font 字体族[font-family] CSS属性font-fami…

    2020年2月22日
    2.3K0
  • jQuery获取URL传递的参数

    URL传递参数是程序开发中经常用到的,中国网页设计给大家分享使用jQuery如何获取URL传递的参数。 例如要获取下面URL地址中的参数: http://www.125jz.com?id=”2020″&title=”jQuery获取URL传递的参数” 实现代码如下: //获取URL参数a和b funct…

    2018年9月30日
    1.8K0
  • “注册”按钮(图片)怎么跳转到注册页面?

    页面代码: <input name=”Submit” type=”submit” class=”STYLE2″ value=”登陆”> <input name=”Submit2″ type=”submit” class=”STYLE2″ value=”注册”> “注册”按钮怎么跳转到注册页面? <inpu…

    2021年4月5日
    1.6K0
  • 第1课:CSS是什么?

    CSS是Cascading Style Sheets (CSS) 是一门指定文档该如何呈现给用户的语言。,用于为HTML文档定义布局。例如,CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。

    2020年2月22日
    2.5K0

发表回复

登录后才能评论