Question

所以，这就是我到目前为止：http://screencast.com/t/y8ajMJ3Cqm 这就是我要做的事：http://screencast.com/t/eeKlrhc1L

除了不同的语言，这是我的代码：

<div style="border: 1px solid; border-color: #339933; background-color: #ccffcc; width: 500px;">
<div style="margin: 5px;" width 150px; float: left; display:inline;>{{{2}}}</div>
<div style="margin: 5px; float: left; width: 330px;>
<div style="padding-left: 5px; margin: 5px; border: 1px solid; border-color: #336633; background-color: #66cc66;"><h3>{{{1}}}</h3></div>
<div style="margin: 5px; padding: 5px;">{{{3}}}</div>
</div>
<div style="clear: both;";></div>
</div>

我有一个容器div，在其中，另外两个div都是“float：left”。其中第一个有图像，它不知何故没有用“标题”和描述推动另一个div。我已经在这里待了大约2个小时，想在搅拌机里研磨 gnomes 。

Answer 1

如果您希望浮动“推开”一个块而不是重叠它（并且只推开其中的文本），则必须在该块上设置overflow:hidden或float。（有关解释，请参阅block formatting context的概念。）

Answer 2

我注意到的第一件事就是你的样式定义中遗漏了"。检查你的第二行和第三行。应该是这样的：

<div style="border: 1px solid; border-color: #339933; background-color: #ccffcc; width: 500px;">
<div style="margin: 5px; width 150px; float: left; display: inline;">{{{2}}}</div>
<div style="margin: 5px; float: left; width: 330px;">
<div style="padding-left: 5px; margin: 5px; border: 1px solid; border-color: #336633; background-color: #66cc66;"><h3>{{{{{2}}}}}</h3></div>
<div style="margin: 5px; padding: 5px;">{{{3}}}</div>
</div>
<div style="clear: both;";></div>
</div>

如果不确切知道{{{3}}} {{1}} {{1}}是什么，我很难再帮助您。也许你可以在默认文本中输入我们的内容，然后我就可以将它放在我沙盒中的家庭维基上进行播放。

Mediawiki模板：2个并排div

2 个答案: