html – 左右对齐在同一行

概述我想创建一个包含两个文本的标题的div.一个文本将被左对齐和一个右对齐.标题将有一个灰色的背景将扩展与文本： <div id="expand-box"> <div id="expand-box-header"> <span style="float: left;">Top left header</span> <span style="float: right;"> 我想创建一个包含两个文本的标题的div.一个文本将被左对齐和一个右对齐.标题将有一个灰色的背景将扩展与文本：

<div ID="expand-Box">   <div ID="expand-Box-header">      <span >top left header</span>       <span >top right header</span>   </div>   Lorem ipsum dorem nori SEOta ostiy</div>

CSS：

#expand-Box{    wIDth: 100%;    padding: 0;    border: 2px solID #BBB;    margin: 7px 0 0 0;}#expand-Box-header{    background-color: #BBB;    margin: 0;    color: #FFF;    padding: 0 0 3px 2px;}

虽然这样做,两个跨度浮在扩展箱头灰色背景上,Lorem Ipsum文本比它应该更高.

解决方法 您的代码不工作的原因是因为浮动div不影响周围元素的大小.在左侧的float中,内嵌块所遇到的问题是当屏幕变小时,会丢失一个标题.我缩小了Jsfiddle Mehmet Eren Yener提供的屏幕尺寸,右边的标题消失了.如果您的标题长,并且屏幕很小 – 右标题将消失.

我认为更好的方法是使用clearfix类或使用overflow标签.还有空的div方法 – 但我并不是那个粉丝.如果您使用这些方法之一,而当它们太靠近时,左标题将堆叠在右标题的顶部.

以下是使用Clearfix和Overflow的示例：

清除：http://jsfiddle.net/ATP33/

HTML：

<div ID="expand-Box"> <div ID="expand-Box-header" >  <span >top left header</span>   <span >top right header</span> </div> <div ID="expand_Box_sub_header">Lorem ipsum dorem nori SEOta ostiy</div> </div>

CSS：

#expand-Box {wIDth: 100%;padding: 0;border: 2px solID #BBB;margin: 7px 0 0 0;}#expand-Box-header {background-color: #BBB;margin: 0;color: #FFF;padding: 0 0 3px 2px;}#expand_Box_sub_header { clear: both; }.clearfix:after { content: "
<div ID="expand-Box"><div ID="expand-Box-header">  <span >top left header</span>   <span >top right header</span></div><div ID="expand_Box_sub_header">Lorem ipsum dorem nori SEOta ostiy</div></div>
A0"; display: block; clear: both; visibility: hIDden; line-height: 0; height: 0;}  .clearfix{ display: inline-block;}  HTML[xmlns] .clearfix { display: block;}  * HTML .clearfix{ height: 1%;}  .clearfix {display: block}

溢出：http://jsfiddle.net/RL8ta/

HTML：

#expand-Box {wIDth: 100%;padding: 0;border: 2px solID #BBB;margin: 7px 0 0 0;}#expand-Box-header {background-color: #BBB;margin: 0;color: #FFF;padding: 0 0 3px 2px;overflow: auto;}#expand_Box_sub_header { clear: both; }

CSS：

总结

以上是内存溢出为你收集整理的html – 左右对齐在同一行全部内容，希望文章能够帮你解决html – 左右对齐在同一行所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。