css - 在 float div 中调整图像大小

Question

我有两个 float div(左和右)嵌套在母 div 中。

float 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%。