1

嗨，我在清除我向左浮动的列表项时遇到问题正如您从我的 jsFiddle 中看到的那样，第一个列表项正在推动第三个项目，从而弄乱了布局。见我的 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 回答