0

Web サイトに、各行に 3 つの項目がある 2 つの行で構成されるメニュー セクションがあります。を使用して一番上の行を上に揃えることができましたが、float:left一番下の行を上に揃える方法がわかりません。どうすればこれを達成できるかについてのアイデアはありますか? すべてのアドバイスは大歓迎です。

<div id="services">
    <div class="banner-image">
    <img src="img/large.jpg" alt="BodywoRx room" />
    </div><!-- end banner-image -->
    <h2>We have a massage that fits YOU.</h2>
    <div id="service-list">
    <div class="service">
        <h3>Coffee Break $25:</h3><p>15 minute chair massage that focuses on the shoulders, neck, arms, wrists and hands.</p>
    </div>
    <div class="service">
        <h3>Lunch Break $40:</h3><p>30 minute table massage that focuses on the shoulders, neck, and lower back.</p>
    </div>
    <div class="service">
        <h3>Lympathic Drainage $50:</h3><p>Session provides congestion relief for the face, throat, and chest.</p>
    </div>
    <div class="service">
            <h3>Bliss $60:</h3><p>60 minute full body massage using light to medium pressure.</p>
    </div>
    <div class="service">
        <h3>Deep Tissue $80:</h3><p>60 minute full body massage using deep pressure.</p>
    </div>
    <div class="service">
        <h3>Correction $95:</h3><p>Session focuses on centering the body and finding and relieving dysfunction that is causing chronic pain and discomfort.</p>
    </div>
    </div><!-- end service-list -->



#services {
    width: 960px;
}

#services .banner-image {
    margin-top: 100px;
    padding-bottom: 40px;
}

#services h2 {
    font-size: 30px;
    padding-bottom: 20px;
}

#services #service-list {
    margin-left: 40px;
}

.service {
    display: inline-block;
    float: left;
    padding-right: 40px;
    width: 265px;
}
4

1 に答える 1

1

「上揃え」とは、2 番目の行を垂直方向の同じ場所から開始することを意味する場合 (つまり、上がすべて並んでいる場合)、単にスタイルに追加height:100px;するだけです。.service

于 2012-07-05T20:15:14.967 に答える