调整浮动div中的图像大小

Question

我有两个浮动div（左和右）嵌套在母div中。

浮动div显示每个图像。

图像必须调整到最大可能的大小而不会有不同的大小。

这就是我所拥有的。

HTML

<div id="mother">
    <div class="left">
        <img src="image.src" />
    </div>
    <div class="right">
        <img src="image.src" />
    </div>
</div>

CSS

#mother {
    width:80%;
    min-width:600px;
    max-width:1800px;
    margin:0 auto;
    display:block;
}
.left {
    float:left;
    min-width:300px;
    max-width:900px;
    width:100%;
}
.right {
    float:right;
    min-width:300px;
    max-width:900px;
    width:100%;
}
.left img, .right img {
    min-width:300px;
    max-width:900px;
    width:100%;
}

Answer 1

您的班级.left和.right的宽度均为100％。这意味着你的div正在尝试在容器中获得相同的空间，因此它们会低于另一个，因为它们不适合同一行。

如果我能正确理解您的问题，您可以通过更改以下类来解决此问题：

.left {
    float:left;
    min-width:300px;
    max-width:900px;
    width:50%;
}

.right {
    float:right;
    min-width:300px;
    max-width:900px;
    width:50%;
}

我将此类的宽度更改为50％。