浮动重复divs，如何保持XY在一起

我目前使用JavaScript库D3创建了很多数字（但我不认为D3与我的问题有任何关联）。该图放置在div X中，并且解释该图的文字在div Y中。我基本上要创建这样一个规律：浮动重复divs，如何保持XY在一起

XYXYXY 

XYXYXY

而是（这取决于我有多宽窗上，因为我不想要固定的宽度），我得到这样的：

XYXYX 

YXYXY

我尝试将XY放在父母div Z<XY>中，以便每对XY都保持在一起，但这不起作用。我也不认为清算一定是这里的答案，但我尝试了所有组合，但都没有成功。

任何帮助，非常感谢。

来源

2014-03-01 Nybi

您能否请您展示一些您当前的工作 - 您可以使用http://jsfiddle.net/ – Wilf

尝试

white-space: nowrap

你也可能需要更改彩车为您的XY的div：

display: inline-block

来源

2014-03-01 15:31:44 beautifulcoder

如果我理解正确的问题，你不需要使用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; 
}

来源

2014-03-01 15:32:03 Diego

如果我理解正确的你，也许这会工作。如果您不需要支持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; 
}

来源

2014-03-01 17:16:30 Mathias

好吧，我解决了这个问题。所以我错了，它确实与D3有关。每一次，我基本上都是向同一个父项添加一个子div，因此内联块根本没有效果。

我最终在代码中添加了“last-child”特性，如“d3.select（”。figure：last-child“）。append（...”，用于图片和文本，以及它的作品完美

我看到了问题，通过在父div上添加边框，我注意到所有的孩子都在同一个div中。然后，我发现解决方案来自：What is the equivalent of jQuery's $(".cell:first") in D3?

来源

2014-03-04 02:32:44 Nybi

浮动重复divs，如何保持XY在一起

回答

相关问题