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

Question

I am currently creating many figures using the JavaScript library D3 (but I don't think D3 has any relevance for my problem). The figure is placed in div X and the text explaining the figure is in div Y . I basically want to create a pattern like this:

XYXYXY

XYXYXY

but instead (depending on how wide my window since I do not want to fix the width), what I get this:

XYXYX

YXYXY

I tried putting XY in a parent div Z<XY> , so that every pair of XY stays together, but that does not work. I also don't think clearing is necessarily the answer here, but I have tried all combinations without success.

Any help is greatly appreciated.

Answer 1

Try

white-space: nowrap

You may also have to change the floats to for your XY divs:

display: inline-block

Answer 2

If I understood the problem correctly, you don't need to use float . Display the divs as inline blocks: display: inline-block .

That will flow the divs as "character blocks" doing the wrap, you'll need to have a parent for the XY to keep the text together with the image.

An example: 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

If I have understood you correctly, maybe this will work. You could also use display: inline-block instead of float: left if you don't need to support IE8 and below.

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

Ok, I solved the problem. So I was wrong, it did have something to do with D3. Each time, I was essentially adding a child div to the same parent, and therefore the inline-block simply had no effect.

I ended up adding a "last-child" feature in my code like "d3.select(".figure:last-child").append(...", for both the picture and the text, and it works perfectly.

I saw the problem by adding a border around the parent div, and I noticed that all children were in the same div. I then found the solution from: What is the equivalent of jQuery's $(".cell:first") in D3?