Question

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

我正在为我正在制作的新网站使用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%;
}

因为它代表了divs彼此相邻（这很好！）但没有居中（这很糟糕！）

有人可以帮我把它们集中起来吗？！

非常感谢，

保

Answer 1

用threecol div替换所有的tricolImg 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 {

}

div中的中心div

1 个答案: