CSS:布置子列坚持父元素的左右边框

Question

布置子列，其中最左边和最右边的列粘在父容器的左右边框上一直对我来说是一个挑战(附图片)，我想知道在 css 中做这件事的正确方法(有经验的设计师会采用的方式)。

如链接图像中所示，有 4 个子列。 https://dl.dropboxusercontent.com/u/27899629/stack/treatment-block.png

我的编码方式:CSS

#treatments-block {
    background-color: #FAF1E2;
    min-height: 400px;
}

.treatment-row {
    margin-top: 10px;
    border: 1px solid red;
    overflow: auto;
}

.treatment {
    width: 17%;
    margin-right: 10%;
    float: left;
}

.treatment img {
    max-width: 100%;
}

HTML

<div id="treatments-block">
    <div class="centrewrap">

        <div class="section-title light-brown-color">SKIN TREATMENTS AVAILABLE</div>
        <div class="treatment-row" style="margin-top:0">

            <div class="treatment">
                <img src="images/botox-fillers-thumb.jpg">
                <h3>Botox & Fillers</h3>
                <p>Some cool text in here some cool text in here..</p>
            </div>

            <div class="treatment">
                <img src="images/botox-fillers-thumb.jpg">
                <h3>Botox & Fillers</h3>
                <p>Some cool text in here some cool text in here..</p>
            </div>

            <div class="treatment">
                <img src="images/botox-fillers-thumb.jpg">
                <h3>Botox & Fillers</h3>
                <p>Some cool text in here some cool text in here..</p>
            </div>

            <div class="treatment" style="margin-right:0;">
                <img src="images/botox-fillers-thumb.jpg">
                <h3>Botox & Fillers</h3>
                <p>Some cool text in here some cool text in here..</p>
            </div>
        </div>
    </div>
</div>

Answer 1

要为父元素的最后一个元素设置样式，可以使用 :last-child 伪类。在你的例子中是这样的:

CSS:

.treatment-row{margin-top:10px;border:1px solid red;overflow:auto;}
.treatment{width:22%; margin-right: 4%; float:left;}
.treatment img{max-width:100%}
.treatment:last-child{float:right; margin-right: 0}

注意:名称"last-child" 有点误导，因为它不是指元素的最后一个子元素，而是指父元素的最后一个子元素。例如:

对于 ul 中的 li 列表，您需要使用 li:last-child 来选择最后一个 li 在那个列表中