html - div(平铺)的百分比宽度

Question

我需要使像“tiles”这样的 div 与百分比宽度并排(使其动态适应浏览器大小)，但现在我有一个问题，当我设置边距并且两个 tiles 有 50%，它们是在彼此之下。我需要让它们并排。这是我的代码:

HTML

<div id="contentContainer">
    <div id="content">
        <div class="bigTile"></div><div class="mediumTile"></div><div class="mediumTile"></div>
    </div>
</div>

CSS

#contentContainer {
    position: absolute;
    left: 0px;
    right: 0px;
    height: 100%;
    overflow: auto;
}

#content {
    padding: 5px;
}

.bigTile {
    display: inline-block; 
    background-color: orange; 
    width: 100%; 
    height: 50px; 
    margin: 5px; 
    padding: 0px; 
    box-sizing: border-box;
}

.mediumTile {
    display: inline-block; 
    background-color: purple; 
    width: 50%; 
    height: 50px; 
    margin: 5px; 
    padding: 0px; 
    box-sizing: border-box;
}

这是 jsFiddle:http://jsfiddle.net/dQMZ5/

知道怎么做吗？我也想创建 25% 的图 block ，但我坚持使用 50%，我认为解决方案将是相同的...

Answer 1

问题是“width: 50%”定义了content + padding + border - margins 的大小。即，然后将边距添加到已经计算出的宽度。

并行将在两种情况下工作:

• 图 block 应该没有边距。如果您需要边距以改善视觉外观，请将额外的带边距的 div 放入图 block 中:

<div class="bigTile"><div class="content"></div></div>

• tile 的样式应为“float: left”(可以省略“display: inline-block”)。

我 fork 你的 jsfiddle 来演示解决方案:

http://jsfiddle.net/akhikhl/23Y8H/1/