如何将两个图像与 HTML 和 CSS 并排放置以最佳地填充给定宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16995105/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I place two images side by side with HTML and CSS to optimally fill up a given width?
提问by Konstantin
I want to place two arbitrary images side by side inside a DIV element, which is exactly 800 px wide (width=800px). The images can be a variety of sizes, in width and height too. Sometimes width greater than height and sometimes width lesser than height. I put both images inside a div element, and a third div which contains both. I tried this code, but doesn't work properly. How should I do it? JSFiddle: http://jsfiddle.net/gUT43/
我想将两个任意图像并排放置在 DIV 元素中，该元素的宽度正好为 800 像素（宽度 = 800 像素）。图像可以是各种尺寸，宽度和高度也是如此。有时宽度大于高度，有时宽度小于高度。我将两个图像放在一个 div 元素中，并将第三个 div 包含两者。我试过这段代码，但不能正常工作。我该怎么做？JSFiddle：http: //jsfiddle.net/gUT43/
<!DOCTYPE html>
<html>
<head>
<style>
img {
max-width: 100%;
height: auto;
width: auto; /* 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>
回答by mituw16
It seems to me that you would want to float: left the divs that contain the images, and then add another div after those elements to clear the float.
在我看来，您可能想要浮动：留下包含图像的 div，然后在这些元素之后添加另一个 div 以清除浮动。
A JSFiddle of your code would be excellent, so that we could help in a more effcient manner :)
您的代码的 JSFiddle 会很棒，以便我们可以更有效地提供帮助:)
回答by Minder Saini
Here is the HTML:
这是 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>
Here is the CSS:
这是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;
}
Here is the fiddle link: http://jsfiddle.net/Mohinder/vv9M6/1/
这是小提琴链接：http: //jsfiddle.net/Mohinder/vv9M6/1/
Is this what you are looking for?
这是你想要的？
回答by vineel
fixed the issue using the style display: inline-flex. Below is the Jsfiddle
使用样式显示修复了该问题： inline-flex。下面是 Jsfiddle
<!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;
/* ie8 */
}
div {
display: inline-flex;
}
回答by Tejas
<!DOCTYPE html>
<html>
<head>
<style>
img {
max-width: 100%;
height: auto;
width: auto; /* 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>
