左右对齐在同一条线上

Question

我想创建一个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;
}

虽然这有效,但两个spans浮动在expand-box-header灰色背景上,而Lorem Ipsum文本浮动的高度应该是它应该的.

Answer 1

你只需要添加 clear:both div

要么

只需创建一个clear包含属性的类

.clear{
    clear:both;
}

<div id="expand-box-header">
      <span style="float: left;">Top left header</span> 
      <span style="float: right;">Top right header</span>
      <div style="clear:both;"></div> <!-- Here we go --> OR <div class="clear"></div>
</div>

演示

Answer 2

您的代码无法正常工作的原因是浮动div不会影响周围元素的大小.左侧浮动内联块的问题在于,当屏幕变小时,您丢失了一个标题.我缩小了JSfiddle Mehmet Eren Yener提供的屏幕尺寸,右侧标题消失了.如果你的标题很长,而且屏幕很小 - 正确的标题会消失.

我认为更好的方法是使用clearfix类或使用溢出标记.还有空Div方法 - 但我并不是那个方法的粉丝.如果您使用其中一种方法,则当它们距离太近时,左侧标题将叠加在右侧标题的顶部.

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

Clearfix:http://jsfiddle.net/ATP33/

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}  

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

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; }