html - 右对齐内容，在代码中保持左内容在前

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. 盒子A

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

我能想到的另一个解决方案是将段落包装在它们自己的容器中，但这感觉像是不必要的标记，实际上不应该存在(它是一种视觉效果，应该由 CSS 处理)。

Answer 1

我不确定我是否理解正确，但在标记中，您似乎想要移动 <p>之前 <div>但是您希望显示与您的 fiddle 相同，即右侧的灰色区域。检查这个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>