0

请参阅以下代码：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)，它允许我将段落标签保留在任何单独的容器之外。我使用溢出技巧来确保外部容器增长到 a) 段落或 b) BoxA 的高度。

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

  1. 段落
  2. 盒子A

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

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

4

3 回答 3

1

我不确定我是否正确，但似乎在标记中，您想将<p>s 移到之前，<div>但您希望显示与您的小提琴相同，即右侧的灰色区域。检查这个小提琴，看看它是否能解决你的问题。

更新

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>
于 2013-04-11T16:21:08.313 回答
0

我建议您使用 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; }

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

于 2013-04-11T16:20:51.413 回答
0

首先，给 Ejay +1，这当然是我追求的结果。然而，有几件事让我对实施感到担忧（特别是display: table-celland 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%;
}

s 以相同的paragraph方式设置样式，但现在div只留下 s 来做它自然的事情。然后使用(删除边距margin-left实际上会使s.divparagraph

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

于 2013-04-24T08:57:53.613 回答