所以这是我的问题:我想在这两个 div 旁边放六张图片，所以它们看起来像这样:http://i.imgur.com/olWU00o.png希望每个人都能明白。这两个面板旁边只有一个包含六个图像的网格，其中包含与它们相关的信息。
<body>
<div id="pagewidth">
<div id="wrapper">
<div class="window">
<div class="message">
text
</div>
</div>
<div class="window">
<div class="message">
text
</div>
</div>
</div>
</div>
</body>
这是 style.css:
#pagewidth {
width: 70%;
text-align: left;
margin: 0 auto;
}
.window {
-webkit-box-shadow: 0px 0px 5px 0px rgba(117, 112, 107, 0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(117, 112, 107, 0.75);
box-shadow: 0px 0px 5px 0px rgba(117, 112, 107, 0.75);
background-color: #D1D5D8;
position: relative;
width: 49%;
}
.message {
margin: 10px;
padding-bottom: 10px;
}
使用 float :打乱整个设计。
最佳答案
尝试使用flexbox，我真的很喜欢。这是更新的 fiddle .
<div class="images-wrapper">
<div class="images">
<img alt="image 1" />
<img alt="image 2" />
<img alt="image 3" />
</div>
<div class="images">
<img alt="image 4" />
<img alt="image 5" />
<img alt="image 6" />
</div>
</div>
#pagewidth {
display: flex;
}
#wrapper {
flex: 1;
}
.images-wrapper {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: flex-start;
}
.images {
position: relative;
display: flex;
flex-direction: column;
}
img {
height: 100px;
width: 100px;
margin: 10px;
}
关于html - 将图像(在网格中)放置在 div 旁边？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32123480/