Question

http://jsfiddle.net/w3hqjczv/

* {
box-sizing: border-box;

}

.clearfix {
  overflow: auto;
}


html, body, ul{
    margin: 0;
    padding: 0px;
}

div#wrapper {
    width: 1140px;
}

section {
    margin:0;
}

.top-nav {
    margin: auto 0;
    text-align: center;
    background-color: black;
}

.top-nav li a {
    text-decoration: none;  
    font-family: Montserrat;
    color: white;
    padding: 0 20px 0 20px;
}

.top-nav li a:hover {
    color: black;   
    background-color: white;
}

nav li {
    display: inline;    
}

section.col34pc {
    padding: 10px;
    width: 34%;
    background-color: pink;
    display: inline-block;  
}

section.col33pc {
    padding: 10px;
    width: 33%;
    background-color: pink;
    display: inline-block;  
}

section.col16pc {
    padding: 10px;
    width: 16%;
    background-color: pink;
    display: inline-block;  
}

为什么33 + 34 + 33不等于100％？

我之前遇到过这种情况，我不能为我的生活记住如何，何地或为何。

我想象的非常基本的东西。

首先发布在这里，所以做得很好！

Answer 1

这是由于这些元素之间的空白。尝试将它们放在代码编辑器中的同一行。

E.g。

<section class="col33pc">
    <h1>Header here</h1>
    <p>Some text here and here and ere</p>
</section><section class="col34pc">
    <h1>Header here</h1>
    <p>Some text here and here and ere</p>
</section><section class="col33pc">
    <h1>Header here</h1>
    <p>Some text here and here and ere</p>
</section>

<强>更新
正如@Zaqx评论的那样，父母的display: flex也有效，但遗憾的是不在 IE9 （大多数客户都需要）。某些浏览器需要供应商前缀（CSS Tricks article）：

.wrap-around-col33pc-col34pc {
    display: -webkit-box;      /* iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* IE 10 */
    display: -webkit-flex;     /* Older versions of Chrome */
    display: flex;
}

CSS布局问题......什么时候100％不等于100％

1 个答案: