Question

我正在尝试将背景图像/颜色应用于标题为： <div class="row-fluid promotion">。但是，当我设置这样的背景时，背景出现在之前的行中，标题为<div class="row-fluid products-row">我看过一些文章，这里有类似的问题，但他们的解决方案似乎没有回答我的问题。

HTML / PHP

<div class="row-fluid products-row">
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 product-image-links" id="product-image-a">
            <a href="https://www.example.com/product-a/"><img src="http://www.example.com/wp-content/uploads/2017/03/product-a.jpg" height="200" width="200"></a>
            <h3 class="button"><a href="https://www.example.com/product-a/"><i class="fa fa-circle" aria-hidden="true"></i><span class="product-title">Product A</span><i class="fa fa-circle" aria-hidden="true"></i></a></h3>
        </div>

        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4" id="product-image-b">
            <a href="https://www.example.com/product-b/"><img src="http://www.example.com/wp-content/uploads/2017/03/product-b.jpg" height="200" width="200"></a>
            <h3 class="button"><a href="https://www.example.com/product-b/"><i class="fa fa-circle" aria-hidden="true"></i><span class="product-title">Product B</span><i class="fa fa-circle" aria-hidden="true"></i></a></h3>
        </div>

        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4" id="product-c">
            <a href="https://www.example.com/product-c/"><img src="http://www.example.com/wp-content/uploads/2017/03/product-c.jpg" height="200" width="200"></a>
            <h3 class="button"><a href="https://www.example.com/product-c/"><i class="fa fa-circle" aria-hidden="true"></i><span class="product-title">Product C</span><i class="fa fa-cirlce" aria-hidden="true"></i></a></h3>
        </div>
    </div>

    <div class="row-fluid promotion">
        <div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
            <p>Text Text Text</p>
        </div>
        <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
            <p>Text Text Text</p>  
        </div>
        <div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
            <p>Text Text Text</p>
        </div>
    </div>

CSS

.products-row{
    text-align: center;
}
#product-image-a{
    width: 29.3%;
    border-radius: 25px;
    list-style-type: none;
    background-color: green;
    background-image: url("http://www.example.com/wp-content/uploads/2017/03/pattern.png"); 
    padding-top: 25px;
    padding-bottom: 10px;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    margin-left: 2%;
    margin-right: 4%;
    margin-bottom: 50px;
}
#product-image-b{
    width: 29.3%;
    border-radius: 25px;
    list-style-type: none;
    background-color: green;
    background-image: url("http://www.example.com/wp-content/uploads/2017/03/pattern.png"); 
    padding-top: 25px;
    padding-bottom: 10px;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    margin-left: 2%;
    margin-right: 4%;
    margin-bottom: 50px;
}
#product-image-c{
    width: 29.3%;
    border-radius: 25px;
    list-style-type: none;
    background-color: green;
    background-image: url("http://www.example.com/wp-content/uploads/2017/03/pattern.png"); 
    padding-top: 25px;
    padding-bottom: 10px;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    margin-right: 2%;
    margin-bottom: 50px;
}
.button{
    background-color: green;
    font-weight: bold;
    margin-left: 30px;
    margin-right: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top-left-radius: 15px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 40px;
    -moz-box-shadow:    inset 0 0 10px #000000;
    -webkit-box-shadow: inset 0 0 10px #000000;
    box-shadow:         inset 0 0 10px #000000; 
}
.product-title{
    padding-left: 20px;
    padding-right: 20px;    
}
.promotion{
    background: silver;
    height: 30px;
    background-image: url(http://www.example.com/wp-content/uploads/2017/03/pattern.png);
}

Answer 1

您可以通过链接两个类选择器来定位div：

.row-fluid.promotion {
  // your style
}

这确保规则仅适用于具有这两个类的div。

Answer 2

您需要将.row-fluid更改为.row。

-fluid中唯一包含.container-fluid的{{3}}类.row-fluid。由于.row不存在且.row-fluid不存在，.row无法清除列元素的浮点数（30px执行的浮点数。）

发生了什么以及如何正常修复它？

一行的背景向上移动到前一行之后的原因是因为您的行已浮动子元素。发生这种情况时，父母会崩溃并且没有身高。父级折叠是因为浮动元素从正常文档流中取出而不占用空间。

您看到灰色背景的唯一原因是您通过.row-fluid在.promotion上设置了.row的高度。否则该行也会崩溃，隐藏灰色背景。

在下面的代码段中，您无法看到容器* { box-sizing: border-box; } body { margin: 0; } .row { background-color: gold; } .row > div { float: left; width: 33.333%; min-height: 35px; border: 1px solid #444; }元素的黄金背景，因为它的子元素已浮动且不占用空间。

<div class="row">
  <div></div>
  <div></div>
  <div></div>
</div>

.row

你需要纠正的是一个clearfix。通常我会推荐Grid System，但你使用的是Bootstrap 3，它的行类内置了一个clearfix。一个clearfix创建一个新的块格式化上下文，所以父元素不会崩溃，背景和边框之类的东西可以是按预期使用。

在下面的代码片段中，我们清除了第一个示例中的浮动子元素，这样父元素就不会折叠，您可以看到黄金背景。这就是* { box-sizing: border-box; } body { margin: 0; } .row { background-color: gold; } .row > div { float: left; width: 33.333%; min-height: 35px; border: 1px solid #444; } .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .cf:after { clear: both; }的作用。

<div class="row cf">
  <div></div>
  <div></div>
  <div></div>
</div>

|-- images
|   -----img_1.jpg
|   -----img_2.jpg
|   -----img_3.jpg
|   ------
|   ------img_n.jpeg
|-- threshold.exe
|-- myscript

Answer 3

在浏览了大部分互联网，以及各种试验和错误后，我设法找出了解决方案。

对于遇到类似问题的任何人，请尝试通过CSS文件将clear: both插入受影响的元素中。

了解详情： W3Schools

如何防止我的背景颜色/图像出现在上一行（引导程序）

3 个答案:

发生了什么以及如何正常修复它？