HTML/CSS内联块无浮动div内的div

我在DIV内有3个DIV。这些框会有一个图像。目前他们是未来的图像占位符。我想用display: inline-block;排列在同一行上。出于某种原因，它们仍然是垂直的而不是水平的。我不想用float，因为我觉得浮动应该用在其他地方。HTML/CSS内联块无浮动div内的div

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

来源

2013-03-06 James

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

来源

2013-03-06 18:13:45 Geneb

这个固定。有趣的是，我以为你想要父母的div应用它。感谢您的帮助。有关如何均匀分隔子div的任何建议？作为'保证金：0汽车;'什么也没做。 – James 2013-03-06 18:22:45

更改宽度：自动;在你的图像divs是宽度：33％; – Geneb 2013-03-06 18:25:49

非常感谢您的帮助。我实际上使用了align-text：center，但我有一种感觉会在稍后发生。宽度：33％效果很好。 – James 2013-03-06 18:35:01

添加规则：

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

jsFiddle example

为了让这些箱子的行，你还可以设置对他们的inline-block的属性，不仅仅是父容器（你可能不需要）。

来源

2013-03-06 18:14:03 j08691

避免使用inline-block的另一种方法是使用浮动。将它们漂浮在左边并清除每个div s中的花车。

来源

2013-03-06 21:25:04

这将是更好，如果你有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-07 06:58:35

HTML/CSS内联块无浮动div内的div

回答

相关问题