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%的人还看了以下文章

  • js实现进度拖拽的效果-调节音量

    用js实现的一个进度拖拽效果,常用于调节音量。 该程序代码简单易懂,单页面可多次调用,效果如下图: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js实现进度拖拽的|www.125jz.com效果</…

    2019年2月15日
    4.5K0
  • CSS制作三角形原理—超简单

    网页制作中我们经常会需要三角形图标,例如内容展开收起、左右箭头点击切换轮播,点击某条列表数据查看详情等。 三角形图标应用范围广,我们有必要了解一下它的实现原理。 1) 一个最基础的边框效果 .content { width: 50px; height: 50px; border: 2px solid; border-color:#ff9600 #3366ff…

    2019年11月26日 网页制作
    3.7K0
  • 22个HTML5的初级技巧

    本文总结了22个HTML5的初级技巧,希望能对你进一步学习好HTML5会有所帮助。

    2018年3月18日
    2.0K0
  • 第2课:CSS的工作原理

    在这一课,你将学习如何制作自己的第一个样式表。你将了解基本的CSS模型,以及在HTML文档里使用CSS所必需的代码。

    2020年2月22日
    3.9K0
  • 网页设计常见css3动画效果(摆动、缩放、旋转、透明、反弹)

    网页上常看到某个DIV或图片有渐入、摆动、缩放、旋转、透明、反弹等效果,今天分享给大家! <!DOCTYPE html> <html> <head> <meta name=”viewport” content=”initial-scale=1.0, maximum-scale=1.0, user-scalable=n…

    2022年5月9日
    2.9K0
  • css布局基础:浮动和清除浮动练习2

    主要知识点: 1、浮动:让元素脱离标准流,从而实现灵活的布局效果。 2、浮动只能左右,不能上下。float:left/right/none。 3、子元素浮动会造成父元素高度塌陷,清除浮动的3种方法: 方法1:通过overflow属性 方法2:通过clear属性 方法3:通过伪元素选择器(推荐) 效果图: 参考: <header> <img …

    2020年4月4日
    2.5K0

发表回复

登录后才能评论