Question

我在容器中有四个div，如下所示：

<div class="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

我想保持第一个和最后一个div与屏幕边缘对齐，并且只将两个div放在中间。我尝试显示内联块并调整边距，但我无法弄明白。请试着赐教！

亲切的问候

Answer 1

使用此HTML

<div class="container">
    <div class="block left">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block right">4</div>
</div>

然后这个CSS

.container {
    display:block;
    text-align:center
}
.block {
    display:inline-block;
    border:1px solid #000;
    padding:10px;
    margin:auto
}
.left {
    float:left
}
.right {
    float:right;
}

您也可以使用第一个孩子和最后一个孩子，但更容易将课程添加到第一个和最后一个div

See fiddle here

Answer 2

尝试使用：nth-of-type（）伪类允许您选择具有公式的元素，如下所示：http://jsfiddle.net/csdtesting/11fh7suy/

//second div    
div.container div:nth-of-type(2) {
        background-color: #9999ff;
        text-align:center;
    }
//third div
    div.container div:nth-of-type(3) {
        background-color: #9999ff;
         text-align:center;
    }

希望它有所帮助！

Answer 3

添加额外的容器将为您提供更多控制权：

<div class="container">
    <div class="block">1</div>
    <div class="wrap">
        <div class="block">2</div>
        <div class="block">3</div>
    </div>
    <div class="block right">4</div>
</div>

.wrap{width:50px;margin:0 auto}
.block{float:left;width:25px;text-align:center}
.right{float:right}

4个div，需要居中2个中心div

3 个答案: