浮動重復div，如何將XY保持在一起

Question

我目前正在使用JavaScript庫D3創建許多圖形（但我認為D3與我的問題沒有任何關系）。 該圖放在div X ，說明該圖的文本在div Y 。 我基本上想創建一個像這樣的模式：

XYXYXY

XYXYXY

但是相反（取決於我不想固定寬度的窗口寬度），我得到的是：

XYXYX

YXYXY

我嘗試將XY放在父div Z<XY> ，以使每對XY保持在一起，但這不起作用。 我也認為清除並不一定是解決問題的辦法，但我嘗試了所有組合但均未成功。

任何幫助是極大的贊賞。

Answer 1

嘗試

white-space: nowrap

您可能還需要將XY div的float更改為：

display: inline-block

Answer 2

如果我正確理解了該問題，則無需使用float 。 將div顯示為嵌入式塊： display: inline-block 。

這將使div作為“字符塊”進行換行，您需要為XY提供父級，以將文本和圖像保持在一起。

范例： http ： //jsfiddle.net/D9BAv/

HTML：

 <div class="figure">
   <div class="picture"></div>
   <div class="text">Example 1</div>
 </div><!-- reapeated ... -->

CSS：

 .figure {
   display: inline-block;
 }
 .picture {
    width: 3rem;
    height: 3rem;
    margin:auto;
    background-color: blue;
 }

Answer 3

如果我對您的理解正確，那么也許可以。 如果您不需要支持IE8及以下版本，也可以使用display: inline-block而不是float: left 。

http://jsfiddle.net/GQ8Uw/

HTML

<div class="cont">
    <div class="x">X</div><div class="y">Y</div>    
</div><div class="cont">
    <div class="x">X</div><div class="y">Y</div>    
</div><div class="cont">
    <div class="x">X</div><div class="y">Y</div>    
</div><div class="cont">
    <div class="x">X</div><div class="y">Y</div>    
</div><div class="cont">
    <div class="x">X</div><div class="y">Y</div>    
</div>
<div class="cont">
    <div class="x">X</div><div class="y">Y</div>    
</div>

CSS

.cont {
    width: 100px;
    float: left;
}

.x, .y {
    width: 50%;
    float: left;
}

.x {
    background: #ccc;
}

.y {
    background: #ecc;
}

Answer 4

好的，我解決了問題。 所以我錯了，它確實與D3有關。 每次，我本質上都是在同一個父對象中添加一個子div，因此，內聯塊根本沒有任何作用。

我最終在代碼中添加了“ last-child”功能，例如“ d3.select（“。figure：last-child”）。append（...“），用於圖片和文本，並且效果很好。

我通過在父div周圍添加邊框看到了問題，並且我注意到所有子級都在同一個div中。 然后我從以下位置找到了解決方案： D3中jQuery的$（“。cell：first”）等效於什么？