Fiddle

Question

好吧，我认为我的CSS技能终于达到了我不需要问这些问题的程度，但是......

我在父div中有三个子div。我希望它们全部显示在同一条线上，每条线占据父母宽度的33％。正如你在我的小提琴中所看到的，那不是正在发生的事情。我做错了什么？

HTML

<div id="parent-div">
    <div id="div1" class="child-div">
        <p>Div 1</p>
    </div>

    <div id="div2" class="child-div">
        <h4>Div 2</h4>
    </div>

    <div id="div3" class="child-div">
        <h4>Div 3</h4>
    </div>
</div>

CSS

#parent-div {
    background: #555;
}

#div1 {
    float: left; /* Commenting this out results in another weird result*/
    width: 33%;
    padding: 10px;
    display: inline-block;
    background: blue;
    box-sizing: border-box;
}

#div2 {
    width:33%;
    padding:10px;
    display: inline-block;
    background: red;
    box-sizing: border-box;
}

#div3 {
    width: 33%;
    padding: 10px;
    box-sizing: border-box;
    background: green;
    display: inline-block;
}

.child-div {
     /*overflow: hidden;*/
}

Answer 1

希望它会帮助你

   h4 , p{
margin:1em;
}

查看演示：

http://jsfiddle.net/9nmCC/5/

Answer 2

最好使用float: left代替inline:block。否则，div之间的空格会导致间距问题。

#div1 {
float: left; /* Commenting this out results in another weird result*/
width: 33%;
padding: 10px;
background: blue;
box-sizing: border-box;
}

#div2 {
    width:33%;
    padding:10px;
    float:left;
    background: red;
    box-sizing: border-box;
}

#div3 {
    width: 33%;
    padding: 10px;
    box-sizing: border-box;
    background: green;
    float:left;
}

Fiddle

Answer 3

你很好。问题是应用于p代码和h4代码的默认保证金。如果您设置margin: 0（并相应调整），您会看到所有方框都是内联的。同时将所有内容更改为float:left，因为inline-block在框之间提供了间隔符。请注意，当您浮动元素时，您需要清除它们。您可以使用clearfix来执行此操作

p{
    margin: 0
}

h4{
    margin:0
}

JSFIDDLE

Answer 4

您需要删除填充，因为它会添加到框的宽度，从而使其宽度超过33％并且会突破到下一行。

此外，您需要将float: left;添加到div2和div3。

无需display和box-sizing

Answer 5

或者您仍然可以在父元素上使用inline-block与font-size:0一起使用，以消除此display值造成的差距：点击此处：http://jsfiddle.net/9nmCC/10/

Answer 6

没有主要问题是您使用的百分比宽度为33％，填充为px。

每个div使用27％并为每个div填充3％，这样你将得到27％+ 3％+ 3％ - 并且完整的div宽度将为33％

例如：

#div1 {
  width: 27%;
  padding: 3%;
}

样本： http://jsfiddle.net/darkosss/mL93f/

如果您仍然需要在px中填充，则需要在每个中插入另一个div并为其添加填充。

Answer 7

不，伙计们，真正抛弃OP代码的是应用填充，因为这会改变添加填充的对象的宽度。

http://jsfiddle.net/dGC8u/1/

如果你从div中取出填充物，你可以看到一切都排好了。

如果你想在浮动元素内的项目周围增加间距，你必须给出内容边距，如下例所示：

http://jsfiddle.net/dGC8u/2/

老实说，你也应该把你的大多数常见规格放到你的班级（.child-div）而不是在每个id-spec中重复它：

#parent-div {
    background: #555;
    overflow:hidden;
}

.child-div {
    float: left; /* Commenting this out results in another weird result*/
    width: 33%;
    display: inline-block;
    box-sizing: border-box;
}

.child-div p, .child-div h4 {
    margin:10px;
}

#div1 {
    background: blue;
}

#div2 {
    background: red;
}

#div3 {
    background: green;
}

这可以避免重复，在基于类的结构中保持一致，并且只更改每个ID必须特定的项。（http://jsfiddle.net/dGC8u/7/）

最后，overflow:hidden需要位于你的浮点数周围的包含元素上，或者它没有你正在寻找的技巧（包含它的子元素）。

如何在一行中显示三个div

7 个答案:

Fiddle