Question

我正试图让3个div彼此相邻。他们需要填补980px的空间，但div左右可能没有边缘。

我该如何解决这个问题？

Answer 1

使用:first-child和:last-child将边距设置为零。

假设您的列具有类column，则可以使用以下CSS代码

.column:first-child { margin-left: 0; }
.column:last-child { margin-right: 0; }

jsFiddle

Answer 2

<强> JSfiddle Demo

<强> CSS

.container {
    width:980px;
    background-color: pink;
    overflow: hidden;
}

.box {
    width:310px;
    margin-right:25px;
    float:left;
    height:75px;
    background-color: #663399;
    margin-bottom: 10px;
}

.container div:nth-child(3n) { 
   /* removes margin-right from every 3rd div */
    margin-right:0;
}

Answer 3

这是一个不使用边距的解决方案：http://jsfiddle.net/c33eM/。

HTML：

<div class = "container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

CSS：

.container {
    width: 980px;
    outline: 1px solid red;
    display: table;
    text-align: center;
}

.container > div {
    width: 310px;
    background-color: #ccc;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border: 1px solid #aaa;
    box-sizing: border-box;
}

.container > div:first-of-type {
    float: left;
}

.container > div:nth-of-type(2) {
    display: inline-block;
}

.container > div:last-of-type {
    float: right;
}

在一行中获得3个带有边距的div

3 个答案: