如何将两个图像与 HTML 和 CSS 并排放置以最佳地填充给定的宽度？答案

【问题标题】：How can I place two images side by side with HTML and CSS to optimally fill up a given width?如何将两个图像与 HTML 和 CSS 并排放置以最佳地填充给定的宽度？
【发布时间】：2013-06-08 01:29:56
【问题描述】：

我想在一个 DIV 元素中并排放置两个任意图像，该元素的宽度正好为 800 像素（宽度=800 像素）。图像可以是各种尺寸，宽度和高度也是如此。有时宽度大于高度，有时宽度小于高度。我将两个图像放在一个 div 元素中，第三个 div 包含两者。我试过这段代码，但不能正常工作。我该怎么做？ JSFiddle：http://jsfiddle.net/gUT43/

<!DOCTYPE html>
<html>
<head>
<style>
img {
     max-width: 100%;
     height: auto;
     width: auto\9; /* ie8 */
    }
div {
 display: inline-block;
 white-space: nowrap;
}
</style>
</head>
<body>

<div style="max-width: 800px; border:2px black solid">

 <div style="height: auto; border:1px green solid"">
  <img src=http://i.imgur.com/Xt6vUQD.jpg>
 </div>

 <div style="height: auto; border:1px blue solid"">
  <img src=http://i.imgur.com/BqFMNlq.jpg >
 </div>

</div>

</body>
</html>

【问题讨论】：

你能发一个 jsfiddle 吗？还是图片？

标签： html css image

【解决方案1】：

在我看来，您想要浮动：离开包含图像的 div，然后在这些元素之后添加另一个 div 以清除浮动。

您的代码的 JSFiddle 会非常好，这样我们就可以更有效地提供帮助 :)

【讨论】：

是的，我想到了JSfiddle，因为我在一个不同的问题中看到过它，但之前从未使用过，也不知道如何使用它。

【解决方案2】：

这是 HTML：

<div class="main_block">

    <div class="inner_block">
        <img src=http://i.imgur.com/Xt6vUQD.jpg>
    </div>

    <div class="inner_block">
        <img src=http://i.imgur.com/BqFMNlq.jpg >
    </div>    
</div>

这是 CSS：

.main_block {
    width: 800px;
    border: 2px black solid;
}

.main_block: before, .main_block: after {
    overflow: hidden;
    content: "";
    display: table;
}

.main_block: after {
    clear: both;
}

.inner_block {
    display: inline-block;
    float: left;
    width: 50%;
}

.inner_block img {
    width: 100%;
    height: auto;
    vertical-align: middle;
}

这里是小提琴链接：http://jsfiddle.net/Mohinder/vv9M6/1/

这是你要找的吗？

【讨论】：

【解决方案3】：

使用样式 display: inline-flex 修复了问题。下面是 Jsfiddle

http://jsfiddle.net/38ry0deL/

<!DOCTYPE html>
<body>
    <div style="max-width: 800px; border:2px black solid">
        <div style="height: auto; border:1px green solid">
            <img src=http://i.imgur.com/Xt6vUQD.jpg />
        </div>
        <div style="height: auto; border:1px blue solid">
            <img src=http://i.imgur.com/BqFMNlq.jpg />
        </div>
    </div>
</body>
img {
    max-width: 100%;
    height: auto;
    width: auto\9;
    /* ie8 */
}
div {
    display: inline-flex;
}

【讨论】：

【解决方案4】：

<!DOCTYPE html>
<html>
<head>
<style>
img {
     max-width: 100%;
     height: auto;
     width: auto\9; /* ie8 */
    }
div {
 display: inline-block;
 white-space: nowrap;
}
.img1,.img2{
      width:50%;
}
</style>
</head>
<body>

<div style="max-width: 800px; border:2px black solid">

 <div class="img1" style="height: auto; border:1px green solid"">
  <img src=http://i.imgur.com/Xt6vUQD.jpg>
 </div>

 <div class="img2" style="height: auto; border:1px blue solid"">
  <img src=http://i.imgur.com/BqFMNlq.jpg >
 </div>

</div>

</body>
</html>

【讨论】：