Question

我正在尝试实现一个“并排”框，其中两个div并排放在一个容器内（左右浮动）。但是，我希望div在每个框中从右到左和从左到右改变，同时在内容增长时仍保持两个div的高度。

我的HTML是静态的。我无法改变这一点。您将看到左侧div包含文本，右侧div包含背景图像和一些文本：

这是我的HTML：

<div id="boxes">
    <div class="box">
        <div class="text">
            This is some content<br>
            This is some content<br>
            This is some content<br>
            This is some content<br>
            This is some content<br>
            This is some content<br>
        </div>
        <div class="image">Right</div>
        <div style="clear:both"></div>
    </div>
    <div class="box">
        <div class="text">
            This is some content<br>
        </div>
        <div class="image">Right</div>
        <div style="clear:both"></div>
    </div>
    <div class="box">
        <div class="text">
            This is some content<br>
            This is some content<br>
            This is some content<br>
        </div>
        <div class="image">Right</div>
        <div style="clear:both"></div>
    </div>
    <div class="box">
        <div class="text">
            This is some content<br>
            This is some content<br>
            This is some content<br>
            This is some content<br>
            This is some content<br>
            This is some content<br>
        </div>
        <div class="image">Right</div>
        <div style="clear:both"></div>
    </div>
    <div class="box">
        <div class="text">
            This is some content<br>
            This is some content<br>
            This is some content<br>
        </div>
        <div class="image">Right</div>
        <div style="clear:both"></div>
    </div>
</div>

我最初尝试了以下CSS（没有评论）：

<style>
    #boxes {
        width: 500px;
        margin: 0 auto;
    }

    .box {
        margin: 5px;
        border: 1px solid black;
        /*display: flex;*/
        width: 100%;
    }

    .box .text {
        width: 50%;
        background-color: #ccc;
        /*flex: 1;*/
    }

    .box .image {
        width: 50%;
        background-color: #eee;
        /*flex: 1;*/
        background-image: url(http://lorempixel.com/400/200/sports/1/);
    }

    .box:nth-child(even) .text {
        float: left;
    }

    .box:nth-child(even) .image {
        float: right;
    }

    .box:nth-child(odd) .text {
        float: right;
    }

    .box:nth-child(odd) .image {
        float: left;
    }
</style>

导致了这个：

这几乎就在那里，除了图片没有显示，因为在.image div中文本增长时，.text div没有告诉任何增长，所以我添加了flex CSS （删除上面CSS中的注释），结果如下：

现在图像显示（这是我想要的），但浮动不起作用。

继承人 FIDDLE 。如果有人知道我遗失了什么，请告诉我。

PS：不允许使用Javascript

感谢。

Answer 1

如果使用flexbox，则不需要浮动。

只需使用flex-flow: row-reverse;

反转每个奇数框的顺序

＆＃13;

#boxes {
        width: 500px;
        margin: 0 auto;
    }

    .box {
        margin: 5px;
        border: 1px solid black;
        display: flex;
        width: 100%;
    }

    .box .text {
        width: 50%;
        background-color: #ccc;
        flex: 1;
    }

    .box .image {
        width: 50%;
        background-color: #eee;
        flex: 1;
        background-image: url(http://lorempixel.com/400/200/sports/1/);
    }

    .box:nth-child(odd) {
        flex-flow:row-reverse;
    }

＆＃13;

<div id="boxes">
    <div class="box">
        <div class="text">
            This is some content<br>
            This is some content<br>
            This is some content<br>
            This is some content<br>
            This is some content<br>
            This is some content<br>
        </div>
        <div class="image">Right</div>
    </div>
    <div class="box">
        <div class="text">
            This is some content<br>
        </div>
        <div class="image">Right</div>
    </div>
    <div class="box">
        <div class="text">
            This is some content<br>
            This is some content<br>
            This is some content<br>
        </div>
        <div class="image">Right</div>
    </div>
    <div class="box">
        <div class="text">
            This is some content<br>
            This is some content<br>
            This is some content<br>
            This is some content<br>
            This is some content<br>
            This is some content<br>
        </div>
        <div class="image">Right</div>
    </div>
    <div class="box">
        <div class="text">
            This is some content<br>
            This is some content<br>
            This is some content<br>
        </div>
        <div class="image">Right</div>
    </div>
</div>

＆＃13;

Answer 2

这样的事情怎么样？ https://jsfiddle.net/jameson5555/oj2qv81m/1/

我切换到图像的绝对定位，然后调整甚至是这样的图像：

.box:nth-child(even) .image {
  left: 50%;
  right: 0;
}

Answer 3

噢，是的，你关闭了。你只是失踪了 flex-direction: row-reverse

将它添加到偶数框而不是依赖浮动。

.box:nth-child(2n+1) {
    flex-direction: row-reverse;
}

https://jsfiddle.net/o5rypunn/

将并排DIV元素与自动高度对齐并浮动在偶数/奇数上

3 个答案: