Question

我试图设计一些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获取div.imageContainer和div.description权限，但将div.details放在描述的右下方，看起来好像已经给了{{1 （实际上，它完全落在"clear:left"之外）：

div.outer

根据我在SO上发现的其他几篇文章的建议，我尝试添加：

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

延长了.outer { overflow: hidden; }，使其包含div.outer - 但div.details与div.details保持相同的位置。

在我的示例HTML中，我发现如果我更换div.description和div.description标记的顺序，我会看到它完全符合我的要求。就示例而言，这是非常棒的，但是并没有帮助我避免深入研究那些生成我真正的HTML的恶劣PHP代码的内容。想要造型。： - /

有没有办法让我用CSS完成这个？

（我意识到我可以用Javascript / jQuery来调整DOM，但这对我来说似乎很糟糕。）

Answer 1

我已在JSBin.com中为您的请求创建了sample。

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

检查更新的来源here

div的顺序，css向左浮动;对

1 个答案: