Question

这就是我遇到的问题：我可以并排排列2张图像，但我想要的是，如果其中一张向左浮动而另一张向右浮动。

如果有人可以举一个例子，我会非常感激。

这是我的代码：

<div class="image123">
    <div class="imageContainer">
        <img src="../images/over_mijzelf.gif" height="188" width="600" />
        <p>#</p>
    </div>
    <div class="imageContainer">
        <img class="middle-img" src="../images/mijn_hond.gif"/ height="188" width="600" />
        <p>#</p>
    </div>

</div>

风格：

<style>
.imageContainer {
    float: left;
}
.imageContainer {
    float: right;
}

p {
    text-align: center;
}
<style/>

Answer 1

问题是您将冲突的样式应用于完全相同的CSS类imageContainer。 CSS类定义了一组适用于多个元素的行为，因此一个类不能同时定义float: left和float: right。解决此问题的一种简单方法是将您的类分成两个，每个对象一个，例如imageContainerLeft和imageContainerRight。

以下是实时JSFiddle演示，了解其工作原理：https://jsfiddle.net/2q18dqju/

以下是更改代码的方法：

<div class="image123">
    <div class="imageContainerLeft">
        <img src="../images/over_mijzelf.gif" height="188" width="600" />
        <p>#</p>
    </div>
    <div class="imageContainerRight">
        <img class="middle-img" src="../images/mijn_hond.gif"/ height="188" width="600" />
        <p>#</p>
    </div>

</div>

CSS：

.imageContainerLeft {
    float: left;
}
.imageContainerRight {
    float: right;
}

p {
    text-align: center;
}

如何并排放置2个图像，其中1个向左浮动而另一个向右浮动？

1 个答案: