Question

我有一个包含三个子div的div，由于某种原因，第一个子div正确定位在其父级中，但另外两个子级位于第一个子级之下。我添加到第一个孩子的内容越多，其他孩子相对于容器父级的顶部就越低。

这是一个向你展示我的问题的小问题：http://jsfiddle.net/gY72a/7/

这三个孩子不在同一条线上，但是当你看第一个孩子与第二个孩子相比有多高时你可以看到问题。

代码已经在jfiddle中，但这里是我正在使用的CSS：

/*Parent div in which all three children are nested*/

#main {
width: 80%;
min-width: 1000px;
background-color: #FFFFFF;
margin: 1% auto;
border-radius: 1px;
border: 0px solid rgba(0, 0, 0, 0.15);
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
}

/*First child*/

#leftside {
display: inline-block;
width: 18%;
margin: 10px 1% 8px;
padding: 1em;
background-color: rgba(0, 0, 0, 0.1);
}

/*Second Child*/

#innermain {
display: inline-block; 
width: 50%; 
margin: 10px 1% 8px;  
padding:1em; 
background-color: #eaeaea;
border-radius: 1px;
border: 0px solid rgba(0, 0, 0, 0.15);
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
}

/*Third child*/

#rightside {
width: 20%;
min-width: 320px;
padding: 1em 0px;
display: inline-block;
background: #FFFFFF;
margin: 10px 1% 8px ;
border-radius: 1px;
border: 1px solid rgba(0, 0, 0, 0.15);
}

Answer 1

这里的主要问题是你使用`display：inline-block＆＃34;而且你正在使用百分比和边距与ems的组合。现在，理论上，你可以有3个块，并添加它们的宽度和填充，以及边距 - 全部等于100，但即使你想要去那条路线，你也使用了内联块方法 - 默认情况下离开每个块之间有一个不需要的空间，并抛出该数字。除此之外，填充和边距增加了盒子的大小，所以如果你有一个20％宽的盒子，并且填充量为1em，边缘为1％ - 那么它的20％+ 2％ + 2em（+总边界宽度） - 这是什么相等？嗯，我不知道 - 浏览器也不喜欢处理这个问题，因为根据窗口大小，这个数字会有所不同。所以，如果你想知道这个问题，那就是导致这些问题的因素。

如果你想要一个解决方案，那么你有一些路线，但它们取决于你需要做什么。它并不像你正在响应地构建这个站点一样。因此，在这种情况下，您正在使用1000px宽的画布。 - 在这种情况下，没有理由你只能使用px将边距/填充/框大小等加起来等于100.将框保留为display: block;并将它们向左浮动。

如果你想进入现在，并开始使用一些现代的东西 - 你应该阅读box-sizing: border-box - 它的作用是改变盒子模型，以便盒子的填充和边框移动到框，因此没有增加它的大小。这真的很棒，让css很愉快。然后你不必添加东西来确定盒子的大小。 - 所以 - 除非你需要支持IE 7 - 我建议你从现在开始将它作为CSS的整体方法的标准。 http://www.paulirish.com/2012/box-sizing-border-box-ftw/

如果要将列放在他们的＆＃34;包装器中＃34;事情 - 那么包装器的东西不再以同样的方式来识别它们，所以你将不得不查找clearfixing div，或者使用overflow：hidden; （它有一些问题）或浮动包装器本身，让它们再次生活在同一个世界，因为浮动将元素排除在常规流程之外。

如果您可以使用盒子大小调整，那么您仍然需要担心边距（他们不会在框内移动）。所以，你需要有百分比的那些，或者获得另一种制作一致的沟槽宽度的奇特方法，但是因为你有一个静态大小的网站 - 我不打算进入那个。
没有你所有风格的Here is a fiddle - 展示它是如何运作的。

HTML

<div class="content-wrapper">

    <div class="column what">
        <h2>What We do</h2>
        <p>Bla bla bla</p>
    </div>

    <div class="column main-content">
        <h2>Latest News and Events</h2>
    </div>

    <div class="column where">
         <h2>Where To Find Us</h2>   
    </div>

</div> <!-- .content-wrapper -->

CSS

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.content-wrapper {
    width: 1000px;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid red;
    overflow: hidden; /* should be clearfix instead */
}

.column { /* what the columns have in common */
    float: left;
    padding: 1em;
}

.what {
    width: 25%;
    margin-right: 1%;
    background-color: orange;
}

.main-content {
    width: 48%;
    margin-right: 1%;
    background-color: yellow;
}

.where {
    width: 25%;
    background: red;
}

Answer 2

您已为下面的display:inline-block指定了div，它们应该在给定宽度的行中正确对齐它们。但width的内容部分采用了div，而div添加了margin给出的box-sizing: border-box;宽度。这就是为什么街区相互跳跃的原因。

当您将div应用于margin时，将计算div的宽度，包括给予相应div的{{1}} s。希望这会对你有所帮助。

#main, #leftside, #innermain{
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

Answer 3

这应该做你想要的：

#main div {
    float: left;
}

3列布局，内联块不工作 - div没有正确排列

3 个答案:

HTML

CSS