Question

<div style="float:left;padding:10px;border-style:dotted;">
  <div style=" width:45%; -webkit-columns: 100px 2;
    /* Chrome, Safari, Opera */
    	-moz-columns: 100px 2;
    /* Firefox */
    	columns: 100px 2;
    	display: block;">


    Die Hoffnung steht auf Pappe: "Mama Merkel help us" zum Beispiel, oder: "We want Sweden". Immer, wenn zuletzt irgendwo in Europa Grenzen geschlossen oder Züge gestoppt wurden, sah man Flüchtlinge mit Schildern. Sie wollten weiter: nach Deutschland, nach
    Schweden.


  </div>
</div>

<div style="float:left;padding:10px;border-style:dotted;">div2</div>
<div style="float:left;padding:10px;border-style:dotted;">div3</div>
<div style="float:left;padding:10px;border-style:dotted;">div4</div>
<div style="clear:both;"></div>

我正在尝试水平对齐两个div。在每个div中，我希望有一个灵活的多列设置来托管无序列表。我无法让它发挥作用。我尝试了很多东西。最后一个是浮动两个div。但是，只要我在第一个div的内容上使用多列功能，第二个就不再在同一行显示它，无论我为第一个div设置的宽度是多少。是否有任何直接的方式来做我想要的事情？

TL; DR;

当第一个div中嵌套有多列div时，Div不会向左浮动。该怎么办？

Answer 1

您的问题来自宽度：45％; 如果您想为此div设置相对宽度，则必须设置父级的宽度，否则，它占用整个空间并使第二行包含以下div。

总结一下，浏览器会问自己：＆＃34; 45％的内容？＆＃34; ：）

Answer 2

你去了很好的自举箱

＆＃13;

.bigbox {
  width: 200px;
  margin-right: 10px;
  display: inline-block;
}

.box {
  background: gray;
  width: 200px;
  padding: 3px;
  height: 200px;
}

#red-wrapper {
  width: 100%;
  background: red;
  overflow: hidden;
}

＆＃13;

<div id="red-wrapper">

  <div class="bigbox">
    <div class="box"> </div>
  </div>
  <div class="bigbox">
    <div class="box"></div>
  </div>
  <div class="bigbox">
    <div class="box"></div>
  </div>

</div>

＆＃13;

水平对齐的div框，其中包含多列

2 个答案: