html - 如何并排对齐 2 张图像，其中 1 张 float 在左侧，另一张 float 在右侧？

Question

这是我遇到的问题:我可以并排对齐 2 张图片，但我希望其中一张 float 到左侧，另一张 float 到右侧。

如果有人能举例说明，我将不胜感激。

这是我的代码:

<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;
}