0

我在一个 DIV 中有 3 个 DIV。这些盒子将有一个图像。目前它们是未来的图像占位符。

我想用display: inline-block;它们排成一行。由于某种原因，它们仍然是垂直的而不是水平的。我不想使用float，因为我觉得 float 应该在其他地方使用。

HTML：

<div class="quickboxes">
  <div id="box1"><img name="" src="" width="75" height="75" alt="">1</div>
  <div id="box2"><img name="" src="" width="75" height="75" alt="">2</div>
  <div id="box3"><img name="" src="" width="75" height="75" alt="">3</div>
</div>

CSS：

.quickboxes {
    display: inline-block;
}

#box1 {
    width: auto;
}

#box2 {
    width: auto;
}

#box3 {
    width: auto;
}
4

4 回答 4

1

显示：内联块；需要在图像 div 的 css 中，而不是包含 div。

于 2013-03-06T18:13:45.307 回答
1

添加规则：

#box1, #box2,#box3 {
display:inline-block;
}

jsFiddle 示例

为了使这些框成行，您还必须在它们上设置 inline-block 属性，而不仅仅是父容器（无论如何您可能不需要）。

于 2013-03-06T18:14:03.480 回答
1

避免使用的另一种方法inline-block是使用浮点数。将它们浮动到左侧并清除每个divs 中的浮动。

于 2013-03-06T21:25:04.927 回答
0

如果您在两者中都包含 inline-block 会更好，如下所示：

.quickboxes {
    display: inline-block;
}
#box1, #box2,#box3 {
display:inline-block;
}

并将这些盒子居中

.quickboxes {
    display: inline-block;
position: relative;
left: -50%; /*- is important for outer div*/
}
#box1,#boc2,#box3{
display: inline-block;
position: relative;
left: 50%; /* + is important for inner div*/
}
于 2013-03-07T06:58:35.390 回答