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"有点误导，因为它不是指元素的最后一个子元素，而是指父元素的最后一个子元素。 E.g：

要获得li中ul的列表，您需要使用li:last-child选择该列表中的最后一个li

CSS：将子列放在左侧;父元素的右边界

1 个答案: