0

私はスタイリングしているこのセクションで奇妙な問題を抱えています..事実上、幅906ピクセルのコンテナ要素があり、内部に4つのスパンがあり、それらはすべて並べて等間隔に配置する必要があります..何が起こっているのか最後の要素が新しい行に流れました。これを修正するために 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 に答える