我想创建一个包含两个文本的标题的div.一个文本将被左对齐和一个右对齐.标题将有一个灰色的背景将扩展与文本：
<div id="expand-Box"> <div id="expand-Box-header"> <span style="float: left;">Top left header</span> <span style="float: right;">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的示例：
HTML：
<div id="expand-Box"> <div id="expand-Box-header" class="clearfix"> <span style="float: left;">Top left header</span> <span style="float: right;">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: "\00A0"; 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}
HTML：
<div id="expand-Box"> <div id="expand-Box-header"> <span style="float: left;">Top left header</span> <span style="float: right;">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; overflow: auto;} #expand_Box_sub_header { clear: both; }
