Question

我有以下HTML / CSS：

.wrapper { border: 1px solid blue; height: auto; width: 830px; }
.feature_wrapper { float: left; width: 395px; margin: 10px; height: auto; }
.feature_wrapper img { float: left; margin-right: 10px; }
.feature_wrapper h3 { }
.feature_wrapper p { overflow: hidden; text-align: justify; }

<div class="wrapper">
        <div class='feature_wrapper'>
            <img src="http://placehold.it/134x134">

            <h3>SAMPLE HEADER</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum porttitor mi, non tincidunt lorem iaculis nec. Vestibulum vel facilisis ante. Sed rutrum vulputate lectus, at fermentum nisi consectetur sit amet. Vivamus ultricies et dolor ut viverra. Nulla in nisi blandit, egestas neque in, rhoncus erat. Sed vitae euismod enim. Pellentesque varius sodales elementum. Nulla ut ligula consectetur massa porttitor pharetra. Morbi et ultrices enim, a finibus enim.</p>
        </div>

        <div class='feature_wrapper'>
            <img src="http://placehold.it/134x134">

            <h3>SAMPLE HEADER</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum porttitor mi, non tincidunt lorem iaculis nec. Vestibulum vel facilisis ante. </p>
        </div>

        <div class='feature_wrapper'>
            <img src="http://placehold.it/134x134">

            <h3>SAMPLE HEADER</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum porttitor mi, non tincidunt lorem iaculis nec. Vestibulum vel facilisis ante. Sed rutrum vulputate lectus, at fermentum nisi consectetur sit amet. Vivamus ultricies et dolor ut viverra. Nulla in nisi blandit, egestas neque in, rhoncus erat. Sed vitae euismod enim. Pellentesque varius sodales elementum. Nulla ut ligula consectetur massa porttitor pharetra. Morbi et ultrices enim, a finibus enim.</p>
        </div>

        <div style="clear: both;"></div>
    </div>

我希望能够根据需要添加任意数量的元素，并且每种元素的文字说明都会有所不同。我如何确保以下内容：

每个左栏都有适当的保证金权利
项目将正确显示
右列与右边缘对齐

Answer 1

您遇到的问题是因为您的包装器宽度为830px，而feature_wrapper的宽度为410px，包括您的边距。两个feature_wrapper的总数不超过830px所以当你向左浮动时，一个不会下降到下一个。

将feature_wrapper设为420px宽或在所有feature_wrapper周围创建一个容器，并将宽度设置为410px。

空间浮动左侧角色的正确方法

1 个答案: