0

我需要用百分比宽度并排制作像“tiles”这样的div（使其动态适应浏览器大小），但现在我有一个问题，当我设置边距并且两个瓷砖有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% 的瓷砖，但我被 50% 困住了，我认为解决方案是一样的......

4

2 回答 2

1

问题是“宽度：50％”定义了内容的大小+填充+边框-边距。即边距然后添加到已经计算的宽度。

并排将在两种情况下工作：

  • 瓷砖不应有边距。如果您需要边距来改善视觉外观，请将带有边距的其他 div 放入图块中：
<div class="bigTile"><div class="content"></div></div>
  • 瓷砖的样式应该是“float:left”（“display:inline-block”可以省略）。

我分叉了你的 jsfiddle 来演示解决方案：

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

于 2013-06-02T20:15:46.550 回答
0

这是我的做法http://jsfiddle.net/jamestoone/dQMZ5/11/。这将为您提供相等的列宽。我已将边距更改为百分比。尽管如果此布局仅适用于 css3 浏览器，那么您可以使用 calc 功能说 width=50%-20px。如果您想要该解决方案，那么我可以提供

<div id="contentContainer">
<div id="content">
    <div class="big Tile"></div>
    <div class="medium Tile"></div>
    <div class="medium Tile"></div>
    <div class="small Tile"></div>
    <div class="small Tile"></div>
    <div class="small Tile"></div>
    <div class="small Tile"></div>
</div>


* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#contentContainer {
    position: absolute;
    left: 0px;
    right: 0px;
    height: 100%;
    overflow: auto;
}

#content {
    padding: 5px;
}

.Tile {
    float: left;
    height: 50px; 
    margin: 1%; 
}

.big.Tile {
    background-color: orange; 
    width: 98%; 
}

.medium.Tile {
    background-color: purple; 
    width: 48%; 
}

.small.Tile {
    background-color: lightblue; 
    width: 23%; 
}
于 2013-06-02T20:07:48.653 回答