Question

这是我的设置

- 18 square tiles in a div
- The side of the square is about 150px
- There are images inside each square
- Same padding and margin between squares

我想要的是，屏幕左侧和右侧的空间总是相同，调整到屏幕尺寸。

现在div内的tile会向左浮动，因此div右侧的填充会发生变化，而左边的填充会保持不变（我将它设置为大约50px）。不确定我是否能很好地解释我的情况，我不确定这是否可行。

Answer 1

没有必要浮动你的元素来并排放置它们。只需使用display: inline-block。

示例： Jsfiddle

HTML：

<div id="container">
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
</div>

CSS：

#container {
    text-align: center;
    width: 100%;
    background: orangered;
}

.tile {
    width: 25px;
    height: 25px;
    margin: 5px;
    background: yellow;
    display: inline-block;
}

Answer 2

所以我假设你的瓷砖尺寸不规则。您可以使用display: inline-block代替float:left。

http://jsfiddle.net/5gp75/

<div class="container">
    <ul class="horizontal tiles">
        <li style="width:100px">Tile 1</li>
        <li style="width:200px">Tile 2</li>
        <li style="width:150px">Tile 3</li>
        <li style="width:70px">Tile 4</li>
        <li style="width:100px">Tile 5</li>
    </ul>
</div>

CSS

.container {
    text-align: center;
}

.horizontal {
    list-style-type: none;
    padding: 0;
}

.horizontal>li {
    display: inline-block;
}

.tiles>li {
    padding: 1em;
}

在div上居中元素

2 个答案: