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>

Demo

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

Answer 3

你可以做左侧

display:inline-block;

这是JSFIDDLE http://jsfiddle.net/erenyener/MBwJq/

但首先，你有内联css代码，最好不要编写内联css代码

clearfix是一项老技术，它可以工作但是，内联块是停止使用clearfix

以下是链接：What is a clearfix?

Answer 4

尝试将overflow: hidden;添加到#expand-box-header元素的样式中。这将自动清除其中的浮动span元素，而无需额外的HTML标记。

Answer 5

要包含浮点数，请使用micro-clearfix。

所以容器的css看起来像这样：

#expand-box:before, #expand-box:after {
    contents: "";
    display: table;
}
#expand-box:after {
    clear: both;
}

左右对齐在同一条线上

5 个答案: