Question

这是代码。

CSS代码：

body {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.parent {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.child1 {
width: 30%;
height: 100%;
display: inline-block;
}
.child2 {
width: 70%;
height: 100%;
display: inline-block;
}

我希望child1和child2的宽度与父级宽度成比例。 Child1是Parent的宽度的30％，而Child2是Parent的宽度的70％。但是，代码会导致Child2输入新行。

以下是HTML代码：

<div class="parent">
<div class="child1">
Hello
</div>
<div class="child2">
Hello
</div>
</div>

演示：http://www.epitaxilia.com/test/test.html

Answer 1

因为您使用的是display: inline-block;，所以白色空间是一个问题，请将您的标记设为

<div class="parent">
    <div class="child1">
     Hello
    </div><!--
    --><div class="child2">
     Hello
    </div>
</div>

~~Demo~~ （有问题的人）

Demo 2 （修正了问题）

有多种方法可以对此进行排序，您可以对这两个元素使用float: left;，但是您需要使用clear浮点数，或者可以使用font-size: 0;父元素，或者您可以在源代码中的单行中创建div。

Answer 2

内联块有点棘手，默认边距使用浮点数而不是

.parent { overflow: hidden; }
.child1 { display: block; float: left; }
.child2 { display: block; float: left; }

Answer 3

因为默认情况下内联块元素彼此之间的间距约为4px（字母间距）

快速修复

.child2 { margin-left:-4px }

更多信息here

Answer 4

内联块设置文本基线上的元素，因此元素之间会有一些空格，就像文本行上的字母之间有空格一样。将两个子元素都设置为：

display: block;
float: left;

Answer 5

你可以将child1和child2都向左浮动，但这会带来一些其他问题。

Inline-Block是一个奇怪的属性，有一些空白问题 - 请参阅http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

因此，如果您重写代码，那么您的child1和child2在同一行，它将起作用。

<div class="parent">
<div class="child1">Hello</div><div class="child2">Hello</div>
</div>

奇怪，不是吗？

Answer 6

您可以使用vertical-align:top;作为应该转到新行的div。

2个孩子div，第二个孩子div尽管内联块进入新线

6 个答案: