0

隣り合わせに 2 つのセクションがあります。1 つは最近の作業用で、もう 1 つは最近のブログ投稿用です。これらの各セクションには 3 つのサムネイルがあり、その右端に「次へ」ボタンが必要です (ただし、楕円の .png になります)。他の要素に影響を与えずに、次の各ボタンを適切な場所に配置するのに苦労しています。

このセクションは、今日、私にいくつかのトラブルをもたらしました。

**また質問する場合:<p><span>要素の下に適切なパディング (20px にする必要があります) を与えることができませんでした。どうすればこれを達成できますか?

これが私が現在持っているものです： 現在

最終的なセットアップは次のようになります。 理想

<div id="recent">
        <div id="recent-work">
            <p><span>Recent Work</span></p>
                <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
                <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
                <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
            <div class="next">
                <a href="#"><img src="img/next.png" alt="Click for more information" /></a>
            </div><!-- end next -->
        </div><!-- end recent-work -->

        <div class="divider">
            <img src="img/divider.png" alt="Section divider" />
        </div><!-- end divider -->

        <div id="recent-blog">
            <p><span>Recent Blog</span></p>
                <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
                <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
                <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
            <div class="next">
                <a href="#"><img src="img/next.png" alt="Click for more information" /></a>
            </div><!-- end next -->
        </div><!-- end recent-blog -->
    </div><!-- end recent -->

と

#recent {
    border-top: 1px solid #202020;
    padding-bottom: 40px;
    padding-top: 40px;
}

#recent .divider {
    display: block;
    float: left;
    margin-left: 20px;
}

#recent #recent-work {
    display: block;
    float: left;
}

#recent #recent-work p span {
    font-family: nevis-webfont;
    font-size: 112.5%;
    font-weight: normal;
    letter-spacing: 1px;
    padding-bottom: 20px;
    text-transform: uppercase;
}

#recent #recent-work a {
    padding-bottom: 40px;
    padding-right: 20px;
}

#recent #recent-work .next{
    float: right;
}

#recent #recent-blog {
    display: block;
    float: right;
}

#recent #recent-blog p span {
    font-family: nevis-webfont;
    font-size: 112.5%;
    font-weight: normal;
    letter-spacing: 1px;
    padding-left: 20px;
    text-transform: uppercase;
}

#recent #recent-blog a {
    padding-bottom: 40px;
    padding-left: 20px;
}

#recent #recent-blog .next{
    float: right;
}
4

1 に答える 1

1

position: absolute;必要な場所に正確に「次のボタン」を取得するために使用することができます。これを試して：

HTML

<div id="recent">
    <div id="recent-work">
        <p><span>Recent Work</span></p>
        <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
        <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
        <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>

        <div class="next">
            <a href="#"><img src="img/next.png" alt="Click for more information" /></a>
        </div><!-- end next -->

     </div><!-- end recent-work -->

     <div class="divider">
        <img src="img/divider.png" alt="Section divider" />
     </div><!-- end divider -->

     <div id="recent-blog">
        <p><span>Recent Blog</span></p>
        <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
        <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
        <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>

        <div class="next">
            <a href="#"><img src="img/next.png" alt="Click for more information" /></a>
        </div><!-- end next -->

     </div><!-- end recent-blog -->
</div><!-- end recent -->

CSS

#recent {
    border-top: 1px solid #202020;
    padding-bottom: 40px;
    padding-top: 40px;
}

#recent .divider {
    display: block;
    float: left;
    margin-left: 20px;
}

#recent #recent-work {
    display: block;
    float: left;
    position:relative;
}

#recent #recent-work p span {
    font-family: nevis-webfont;
    font-size: 112.5%;
    font-weight: normal;
    letter-spacing: 1px;
    padding-bottom: 20px;
    text-transform: uppercase;
}

#recent #recent-work a {
    padding-bottom: 40px;
    padding-right: 20px;
}

#recent #recent-blog {
    display: block;
    float: right;
    position:relative;
}

#recent #recent-blog p span {
    font-family: nevis-webfont;
    font-size: 112.5%;
    font-weight: normal;
    letter-spacing: 1px;
    padding-left: 20px;
    text-transform: uppercase;
}

#recent #recent-blog a {
    padding-bottom: 40px;
    padding-left: 20px;
}

#recent .next{
position:absolute;
bottom:-15px;
right:0;
}

それがあなたを助けることを願っています!

于 2012-06-18T17:36:48.393 に答える