右对齐内容，在代码中保留左侧内容

Question

请参阅以下代码：http://jsfiddle.net/chricholson/tyLbE/1/

HTML

<section>
    <div>Secondary content</div>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum nunc at nibh elementum vestibulum. Curabitur nisi tortor, porttitor sed facilisis vel, volutpat in quam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum nunc at nibh elementum vestibulum. Curabitur nisi tortor, porttitor sed facilisis vel, volutpat in quam.</p>
</section>

CSS

section { border: 1px solid red; overflow: hidden; }
div { float: right; width: 48%; height: 200px; background: #eee; }
p { width: 48%; }

我有一个div（BoxA）浮动到右边，这允许我将段落标记保留在任何单独的容器之外。我使用溢出hack来确保外部容器增长到a）段落或b）BoxA的高度。

我想要的是将HTML重新排序为

1. 段
2. BOXA

对我来说显而易见的解决方案是CSS定位辅助内容，但这当然会阻止外部容器的任何增长，如果BoxA框长于段落列表。我想避免使用任何类型的Javascript设置高度，从SEO的角度来看，这并不重要。

我能想到的另一个解决方案是将段落包装在自己的容器中，但这感觉就像不必要的标记一样，不应该存在（这是一个应该由CSS真正处理的视觉事物）。

Answer 1

我不确定我是否帮助您，但似乎在标记中，您希望在<p>之前移动<div>，但您希望显示与您的显示相同小提琴，即右边的灰色区域。检查此fiddle，看看它是否解决了您的问题。

更新

CSS

section{ border: 1px solid red; overflow: hidden; }
div{
   background: none repeat scroll 0 0 #EEEEEE;
   border: 1px solid #000000;
   display: table-cell;
   height: 246px;
   width: 1%;
}
p{
   clear: left;
   float: left;
   width: 48%;
}

和标记（未更改）

  <section>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum nunc at nibh elementum vestibulum. Curabitur nisi tortor, porttitor sed facilisis vel, volutpat in quam.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum nunc at nibh elementum vestibulum. Curabitur nisi tortor, porttitor sed facilisis vel, volutpat in quam.</p>
     <div>
        Secondary content
     </div>

  </section>

Answer 2

我建议你使用像这个例子中的html包装器：

http://jsfiddle.net/tyLbE/4/

<section>
    <div class="left">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum nunc at nibh elementum vestibulum. Curabitur nisi tortor, porttitor sed facilisis vel, volutpat in quam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum nunc at nibh elementum vestibulum. Curabitur nisi tortor, porttitor sed facilisis vel, volutpat in quam.</p>
    </div>
    <div class="right">
        Secondary content
    </div>
    <div class="clear"></div>
</section>

和css：

section { border: 1px solid red; overflow: hidden; }
div.left { float: left; width: 48%; }
div.right { float: right; width: 48%; height: 200px; background: #eee; }
div.clear { clear: both; }

你可以省略“清除”，因为左边和右边的框后面没有任何内容，但如果你想在两个框下面有一些内容，这就是你可以停止浮动的方式（即使他们没有相同的高度）

Answer 3

首先，给Ejay +1，这肯定是我追求的结果。然而，有一些事情让我担心实施（特别是display: table-cell和width: 1%。我真的不能错，因为它确实有效，但我的直觉是尖叫着我，有些东西不是'是的，可能会在将来让我失望。它实际上有点突破，取决于容器宽度我会在Chrome中获得1px的差距：

无论如何，它激励我更加努力，我想出了这个：http://jsfiddle.net/z6TMJ/2/

<强> HTML

<section>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum nunc at nibh elementum vestibulum. Curabitur nisi tortor, porttitor sed facilisis vel, volutpat in quam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum nunc at nibh elementum vestibulum. Curabitur nisi tortor, porttitor sed facilisis vel, volutpat in quam.</p>
    <div>Secondary content</div>
</section>

<强> CSS

section {
    border: 1px solid red;
    overflow: hidden;
}
div {
    background: none repeat scroll 0 0 #EEEEEE;
    margin-left: 50%;
    width: 50%;
    height: 246px;
    border: 1px solid #000;
    box-sizing: border-box;
}
p {
    clear: left;
    float: left;
    width: 50%;
}

paragraph的样式设置方式相同，但现在div单独处理其自然事物。然后使用margin-left将其放在右侧（删除边距实际上会使div显示在paragraph后面。

虽然这可能不适合所有情况，但我知道一些事情，如容器的宽度和段落和次要内容的宽度，这种方式似乎很好。