0

我正在尝试设计一些基本上具有以下结构的 HTML（它是由一个可怕的 PHP 脚本生成的，如果我可以避免的话，我不想使用它）。

<div class="outer">
  <div class="imageContainer"><img src="image42.png" /></div>
  <h1>The Title String</h1>
  <div class="description">Lorem ipsum dolor sit amet, ... </div>
  <div class="details">These are the details...</div>
</div>

我希望div.imageContainer向左浮动，div.details向右浮动，描述文本在它们之间向下流动（如果有很多描述文本，则在左侧的图像下方）。

下面的 CSS 获得了 thediv.imageContainer和div.description右边，但是把div.details下面的和放在描述的右边，看起来好像它已经被赋予了 a "clear:left"（实际上，它完全在 之外div.outer）：

.imageContainer { float: left; }
.description    { width: 50%;  }
.details        { width: 50%;
                  float: right; }

根据我在 SO 上找到的其他几篇帖子的建议，我尝试添加：

.outer          { overflow: hidden; }

它延长了 thediv.outer以便它包含div.details- 但div.details相对于div.description.

在我的示例 HTML 中，我发现如果我交换div.descriptionanddiv.details标记的顺序，我会得到它看起来就像我想要的一样。就示例而言，这很好，但并不能帮助我避免深入研究那些生成我真正想要样式化的 HTML 的极其可怕的 PHP 代码。：-/

有什么办法让我只用 CSS 来完成这个吗？

（我意识到我可以用 Javascript/jQuery 摆弄 DOM，但这对我来说似乎很笨拙。）

4

1 回答 1

0

我在 JSBin.com 中为您的请求创建了一个示例。

在示例中，我将float:left;样式应用于div.description元素并清除了元素的浮动div.outer。

在此处检查更新的源

于 2012-12-11T05:56:24.807 回答