5

我想在一个 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>
4

4 回答 4

1

Here is the 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:

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

Is this what you are looking for?

于 2013-10-25T10:21:38.210 回答
1

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

您的代码的 JSFiddle 会非常好，以便我们以更有效的方式提供帮助:)

于 2013-06-08T01:48:25.173 回答
1

使用样式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;
}
于 2016-08-22T18:41:35.130 回答
0 
<!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>
于 2013-10-25T09:33:57.477 回答