Fatal编程技术网
  • html/
  • 如何使用HTML和CSS并排放置两个图像，以最佳方式填充给定的宽度？

如何使用HTML和CSS并排放置两个图像，以最佳方式填充给定的宽度？

html css image

如何使用HTML和CSS并排放置两个图像，以最佳方式填充给定的宽度？,html,css,image,Html,Css,Image,我想在一个DIV元素中并排放置两个任意图像，它的宽度正好是800 px（宽度=800 px）。图像可以是各种大小，宽度和高度也可以。有时宽度大于高度，有时宽度小于高度。我将两个图像放在一个div元素中，第三个div包含这两个元素。我尝试了这段代码，但没有正常工作。我该怎么做？JSFiddle： img{ 最大宽度：100%； 高度：自动； 宽度：自动\9；/*ie8*/ } div{ 显示：内联块； 空白：nowrap； } 在我看来，您可能希望浮动：保留包含图像的div，然后在这些元素之后添

我想在一个DIV元素中并排放置两个任意图像，它的宽度正好是800 px（宽度=800 px）。图像可以是各种大小，宽度和高度也可以。有时宽度大于高度，有时宽度小于高度。我将两个图像放在一个div元素中，第三个div包含这两个元素。我尝试了这段代码，但没有正常工作。我该怎么做？JSFiddle：


img{
最大宽度：100%；
高度：自动；
宽度：自动\9；/*ie8*/
}
div{
显示：内联块；
空白：nowrap；
}
在我看来，您可能希望浮动：保留包含图像的div，然后在这些元素之后添加另一个div以清除浮动

您的代码中有一部分将是非常好的，这样我们就可以更有效地提供帮助：）


img{
最大宽度：100%；
高度：自动；
宽度：自动\9；/*ie8*/
}
div{
显示：内联块；
空白：nowrap；
}
.img1、.img2{
宽度：50%；
}
以下是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>
这里是小提琴链接：

这就是您想要的吗？

使用样式display:inline flex解决了这个问题。下面是Jsfiddle


img{
最大宽度：100%；
高度：自动；
宽度：自动\9；
/*ie8*/
}
div{
显示：内联flex；
}
您可以发布JSFIDLE吗？或者一个图像？是的，我想到了JSFIDLE，因为我在另一个问题中看到过它，但以前从未使用过它，我也不知道如何使用它。 
<!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>

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

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

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