同一行左右对齐

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 文本则漂浮得比它应该的更高。

- John 'Mark' Smith

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

- Dhaval Marthak

Answer 2

你的代码无法正常工作是因为浮动的div不会影响周围元素的大小。使用内联块左侧浮动时，你会在屏幕变小时失去一个标题。我在Mehmet Eren Yener提供的JSfiddle上缩小了屏幕尺寸，右侧标题消失了。如果你的标题很长，而屏幕很小，右侧的标题将会消失。

我认为更好的方法是要么使用一个clearfix类，要么使用overflow标签。还有一种空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; }

- Pearl

---

浮动（Floating）在某种程度上已经成为了一门逐渐消亡的技艺，越来越不鼓励使用。但是，如果你经常使用浮动布局，这篇文章可以帮助你更好地理解浮动的行为：http://css-tricks.com/all-about-floats/ - Pearl

Answer 3

你可以为左侧做些什么。

display:inline-block;

这里是 JSFIDDLE http://jsfiddle.net/erenyener/MBwJq/ 但首先，你有行内 CSS 代码，最好不要写行内 CSS 代码

clearfix 是一项旧技术，虽然它可用，但应停止使用 clearfix ，而是使用 inline-block

这里是链接：什么是 clearfix？

- Mehmet Eren Yener

Answer 4

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

- Arnelle Balane

Answer 5

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

因此，容器的CSS将如下所示：

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

- josh_bailey4