0

我已经搜索了很长时间来寻找这个问题的答案！

我正在为我正在制作的新网站使用 12 列布局。我在 1 行上有 4 个 div：

<div class="colContainer">
        <div class="row">
            <div class="threecolImg">
                <p>Row 1: three</p>
            </div>
            <div class="threecolImg">
                <p>Row 1: three</p>
            </div>
            <div class="threecolImg">
                <p>Row 1: three</p>
            </div>
            <div class="threecolImg last">
                <p>Row 1: three</p>
            </div>
        </div>
    </div>

我的CSS如下：

.colContainer {
padding-left: 20px;
padding-right: 20px;
}

.row {
width: 100%;
max-width: 1140px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}

.threecolImg {
float: left;
min-height: 1px;
width: 22.05%;
}

就目前而言，div都彼此相邻（这很好！）但不居中（这很糟糕！）

有人可以帮我把它们放在中心吗？！

非常感谢，

保罗

4

1 回答 1

1

将所有threecolImg div 替换为threecol div。他们将居中。

<div class="colContainer">
    <div class="row">
        <div class="threecol">
            <p>Row 1: three</p>
        </div>
        <div class="threecol">
            <p>Row 1: three</p>
        </div>
        <div class="threecol">
            <p>Row 1: three</p>
        </div>
        <div class="threecol last">
            <p>Row 1: three</p>
        </div>
    </div>
</div>

也从你的 CSS 中删除：

.threecolImg {
  float: left;
  min-height: 1px;
  width: 22.05%;
}

如果你想在threecol div中设置图像样式，更喜欢那个选择器：

.threecol img {

}
于 2012-07-07T23:41:14.007 回答