0

我正在设计的这部分有一个奇怪的问题。实际上，我有一个 906px 宽的容器元素，然后里面有四个跨度，它们应该并排排列并均匀分布。发生的事情是最后一个元素已流向新行。我已经尝试了 last-child 和 last-of-type 的变体来解决这个问题，但我所做的一切都不起作用。我什至对“最后一个”类进行了硬编码，而右边距仍然适用于这段代码。有任何想法吗？请参阅下面的图片了解正在发生的事情。

HTML

<div id="internship-carousel" class="group">
    <div id="internship-carousel-container">
        <span class="internship-section">
            <h4>Amnesty International</h4>
            <img src="img/intern_logo/amnesty.png" class="intern_logo" alt="Amnesty International">
        </span>
        <span class="internship-section">
            <h4>State of Georgia</h4>
            <img src="img/intern_logo/georgia.png" class="intern_logo" alt="Amnesty International">
        </span> 
        <span class="internship-section">
            <h4>Department of State</h4>
            <img src="img/intern_logo/statedepartment.png" class="intern_logo" alt="Amnesty International">
        </span> 
        <span class="internship-section internship-section-last">
            <h4>CARE</h4>
            <img src="img/intern_logo/care.png" class="intern_logo" alt="Amnesty International">
        </span>
    </div>
</div>

CSS

#internship-carousel{margin-top:50px;}
.internship-section{
    background-color:#dfdfdf;
    text-align:center;
    padding:0px;
    width: 190px;
    height:225px;
    margin-right:44px;
    display:block;
    float:left;
}
.internship-section h4{
    padding-top:15px;}
}
span.internship-section-last
{
    margin:0;
}
.group:before,
.group:after {
    content:"";
    display:table; }
.group:after { clear:both; }

在此处输入图像描述

4

2 回答 2

0

尝试将此添加到您的 css 并删除最后一个类

.internship-section:nth-child(4){
    margin-right:0px
}
于 2013-10-23T01:06:53.173 回答
0

你的代码有错别字：

.internship-section h4{
    padding-top:15px;}
}

删除声明}后的padding-top，你应该是金色的。（演示）

顺便说一下，演示使用了:last-child选择器。

于 2013-10-23T01:13:58.233 回答