Question

出于某种原因，当我向我的元素添加左/右浮动时，它会在下一行的图像元素后面显示它们。

以下是实际的实际页面：

http://www.dealerbyte.co.uk/used-cars.php

以下是代码：

HTML

      <div class="col-md-8 col-sm-8 col-lg-8">
        <div class="listing-container">
          <h3 class="model-listing-title">2011 (11) Mercedes-Benz C Class C250 CDI BlueEFFICIENCY Sport 4dr Auto</h3>
          <h3 class="price-listing">£17,998</h3>
        </div>
        <div class="listing-container-spec">
          <img src="media/img/mercedes-test.jpg" alt="mercedes-benz"/>
        </div>
      </div>

CSS

.listing-container {
    background-color:#dddddd;
    padding:0;
    border-radius:6px 6px 0 0;
    -moz-box-shadow:inset 0 0 10px #000000;
    -webkit-box-shadow:inset 0 0 10px #000000;
    box-shadow:inset 0 0 5px #000000;
    padding:1px 10px;
}

.listing-container-spec {
    background-color:#153066;
    width:100%;
    height:auto;
    display:block;
    position:relative;
}

.listing-container-spec img {
    width:60%;

}

.model-listing-title {
    font: 600 2em 'Open Sans', sans-serif;
    margin-top:0.1em;
    display:block;
    position:absolute;
    float:left;
}

.price-listing {
    font: 600 2em 'Open Sans', sans-serif;
    margin-top:0.1em;
    float:right;
    display:block;
    position:absolute;
}

如果您查看实例，您会注意到如果您检查元素是否位于图像后面，当浮动被禁用时它会显示正常但我希望价格类能够向右浮动。

我该怎么办？

Answer 1

将overflow:auto添加到.listing-container，然后从position:absolute;移除.price-listing。

Answer 2

从position: absolute;和.model-listing-title移除.price-listing，您必须清除浮动元素。您可以将overflow: auto;添加到.listing-container来执行此操作，但这可能会导致某些溢出的元素出现问题，并且您确实希望它们出现。执行此操作的最佳方法是将类clearfix添加到其中并在CSS文件中定义它。您始终可以通过将此类添加到浮动元素的容器来使用此类来清除浮动元素。

.clearfix:before,
.clearfix:after {
    content: '\0020';
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    zoom: 1;
}

Answer 3

由于你正在使用bootstrap，你不需要浮动任何东西，只需这样做：

<div class="col-md-8 col-sm-8 col-lg-8">
    <div class="row">
        <div class="col-md-6 col-sm-6 col-lg-6">
            <div class="listing-container">
                 <h3 class="model-listing-title">2011 (11) Mercedes-Benz C Class C250 CDI BlueEFFICIENCY Sport 4dr Auto</h3>

                 <h3 class="price-listing">£17,998</h3>

            </div>
        </div>
        <div class="col-md-6 col-sm-6 col-lg-6">
            <div class="listing-container-spec">
                <img src="media/img/mercedes-test.jpg" alt="mercedes-benz" />
            </div>
        </div>
    </div>
</div>

如果你想要左边的车，只需改变div的顺序。您可能需要不同的列大小，因此请随意调整

和voilá，完美的响应式布局，无需处理浮动

向右/向左浮动使元素隐藏

3 个答案: