1

こんにちは、左にフロートしたリスト アイテムをクリアするのに問題があります。私の jsFiddle からわかるように、最初のリスト アイテムが 3 番目のアイテムをプッシュしてレイアウトを台無しにしています。私の jsFiddleを見てください

<style>

.wrap {
    width:960px;
    margin:0 auto;
    overflow:hidden;
}

ul.team-members {
    overflow:hidden;
}

ul.team-members li {
    float:left;
    width:450px;
    margin-bottom:40px;
}

ul.team-members li img {
    float:left;
    width:120px;
    padding-right:20px;
}

ul.team-members li p {
    float:left;
    width:310px;
    margin:0;
}
</style>

    <section class="wrap">

        <h1>Our Team</h1>

        <div class="store">

            <h2>Monmouth</h2>

            <ul class="team-members">

                <li>
                    <img src="_/img/t-member.jpg">
                    <p><strong>Maureen</strong> - who is originally from Fife is our longest serving member of staff. Qualified to City & Guilds level in soft furnishings, Maureen is always keen to offer advice on projects, colour schemes, fabrics and trimmings. We have an 'Ask Maureen' option on our homepage where you can ask any soft furnishing or window treatment related question, the trickier the better as she loves a challenge!</p>
                </li>
                <li>
                    <img src="_/img/t-member.jpg">
                    <p><strong>Rosyln</strong> - is known for her bubbly welcoming approach to all customers and is always keen to help with advice on the selection of suitable fabrics for your curtains, blinds or upholstery.</p>
                </li>
                <li>
                    <img src="_/img/t-member.jpg">
                    <p><strong>Clare</strong> - has a background in interior design and is very experienced and knowledgeable on fabric choices, tracks, poles and the full spectrum of soft furnishing and upholstery options.</p>
                </li>
                <li>
                    <img src="_/img/t-member.jpg">
                    <p><strong>Ann</strong> - Manages our team, our workrooms and arranges installation in conjunction with our.</p>
                </li>

            </ul>

        </div>
</section>

ああ、これを行う方法を知っている必要があります。頭が真っ白になりました。何か案は？

4

4 に答える 4

5

取り外しfloat:leftて使用display: inline-block; vertical-align: top;

ul.team-members li {
   display: inline-block; vertical-align: top;
    width:450px;
    margin-bottom:40px;
}

デモ

于 2012-11-07T10:04:57.577 に答える
1

デモ

こんにちは、以前は:nth-of-type(odd)

このように

ul.team-members li:nth-of-type(odd){
clear:both;
}

ライブデモ

于 2012-11-07T10:07:04.083 に答える
0

これを試して：

ul.team-members li {
float:left;
width:450px;
margin-bottom:40px;
clear: both;
}
于 2012-11-07T10:02:33.700 に答える
0

display: inline-block;の代わりに使用しfloat: left;ます。vertical-align: top;また、コンテナを正しく整列させるためにを使用することも忘れないでください。

例: http://jsfiddle.net/EqHXP/3/

于 2012-11-07T10:09:42.957 に答える