Question

所以这就是我的问题：我想在这两个div旁边放六张图片，所以它们看起来像这样：http://i.imgur.com/olWU00o.png希望每个人都明白这个想法。只是一个网格，在这两个面板旁边有六个图像，其中包含与它们相关的信息。

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

这里有style.css：

for(var i = 0; i < numContainers; i++) {
//fades down div block_0
//then div block_1
//then div block_2
//then div block_3
//etc
}

使用float：搞乱整个设计。

Answer 1

尝试使用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;
}

Answer 2

使用margin和left.right，top和bottom。获取更多信息click here

在div旁边放置图像（在网格中）？

2 个答案: