Question

我目前正在使用JavaScript库D3创建许多数字（但我不认为D3与我的问题有任何关联）。该图放在div X中，解释该图的文字位于div Y。我基本上想要创建一个这样的模式：

XYXYXY

XYXYXY

但是（取决于我的窗口有多宽，因为我不想修复宽度），我得到了这个：

XYXYX

YXYXY

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

非常感谢任何帮助。

Answer 1

尝试

white-space: nowrap

您可能还需要更改XY div的浮点数：

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中。然后我找到了解决方案：What is the equivalent of jQuery's $(".cell:first") in D3?

浮动重复的div，如何将XY保持在一起

4 个答案: