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

我有一个包含三个子div的div，由于某种原因，第一个子div正确地定位在其父div中，但其他两个子div的位置低于第一个子div。向第一个子元素添加的内容越多，其他子元素相对于容器父元素顶部的位置就越低。

这里有一个jfiddle告诉你我的问题: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);
}

这里的主要问题是您正在使用' display:inline-block"，并且您正在使用em的百分比和margin的组合。现在，从理论上讲，您可以有3个块，并将它们的宽度、填充和边距相加，使它们都等于100，但即使您想采用这种方法，也要使用inline-block方法——默认情况下，在每个块之间留下一点不必要的空间，并抛出该数字。除此之外，填充和边距会增加框的大小，所以如果你有一个宽度为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/

如果你要浮动的列在他们的"包装器"的东西-然后包装器的东西不再会以同样的方式识别他们，所以你将不得不查找清除修复div，或使用overflow:hidden;(这有一些问题)或者浮动包装器本身，让它们再次生活在同一个世界，因为浮动将元素从常规流中取出。

如果您可以使用box-sizing，那么您仍然需要担心边距(它们不会在框内移动)。所以，你需要用百分比来表示这些，或者用另一种花哨的方法来制作一致的排沟宽度，但是因为你有一个静态大小的网站-我不打算深入研究这个。
这是一个没有你所有风格的小提琴-展示它是如何工作的。

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

您已经为下面的div指定了display:inline-block，它们应该按照给定的宽度排成一行。但width是由div的内容部分，div加上margin的宽度给他们。这就是为什么积木会一个比一个低。

当您将box-sizing: border-box;应用于div s时，将计算div的宽度，包括给予相应div s的margin 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+ */
}

这应该是你想要的:

#main div {
    float: left;
}

HTML

相关内容

最新更新

热门标签：