左右对齐在同一条线上

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

Answer 3

你可以做左侧

display:inline-block;

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

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

clearfix是一项老技术，它的工作原理但是，内联块是停止使用clearfix

这是链接： 什么是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;
}