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

  • PS图片转页面CSS+HTML的步骤

    标准的网页制作流程是:拿到网站美工制作的psd效果图后,网页设计师再把PS制作的图片转html页面。

    网页制作 2020年2月12日
    4.2K0
  • 跟永哥学HTML5(6)H5语义化标记使用示例

    介绍了HTML5中新增的语义化标记article section aside hgroup header footer nav time mark figure figcaption,对各个标记给出解释和应用示例。

    2020年2月12日
    1.8K0
  • 5种 CSS 实现DIV中内容垂直居中的方法

    使用 CSS 实现DIV中内容垂直居中并不容易,有些方法在一些浏览器中无效。 今天中国网页设计给大家分享使DIV中对象垂直集中的5种不同方法,以及它们各自的优缺点。 CSS 实现DIV中内容垂直居中方法一 这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性。 <div class=…

    2018年9月23日
    3.8K0
  • HTML5网页中如何嵌入音频,视频?

    《HTML5的视频播放控制技术》 介绍了HTML5的video元素和常用属性,以及视频播放控制技术,如播放、暂停、音量、全屏、回放功能的实现。不会的童鞋可以学习。 本文主要介绍在HTML5 中如何嵌入音频,视频? 在HTML5 中如何嵌入音频? HTML5 支持 MP3、Wav 和 Ogg 格式的音频,代码示例: <audio controls>…

    2019年11月23日
    2.3K0
  • Html5一句代码制作语音搜索框

    HTML5+CSS3打造可自动获得焦点和支持语音输入的超酷搜索框

    2022年3月19日 网页制作
    6250
  • 第13课:HTML音频/视频

    HTML 音频 在 HTML 中播放音频并不容易!您需要谙熟大量技巧,以确保您的音频文件在所有浏览器中(Internet Explorer, Chrome, Firefox, Safari, Opera)和所有硬件上(PC, Mac , iPad, iPhone)都能够播放。 <embed> 元素 <embed> 标签,这是一个 HT…

    2018年1月18日
    2.6K0

发表回复

登录后才能评论