投稿
  1. 中国网页设计首页
  2. 教程
  3. 网页制作

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

江山如画 • • 网页制作 • 阅读 1677

一、两个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)
江山如画江山如画管理团队
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2018年12月4日 pm3:25
下一篇 2018年12月11日 pm2:56

99%的人还看了以下文章

发表评论

登录后才能评论