Question

我正在玩响应式网格，但我无法为嵌套元素显示背景颜色。

我的HTML和CSS在这里：
https://jsfiddle.net/ro196bjr/9/

<body>  
    <div class="grid-container">
        <div class="row">
          <div class="col-4 col-m-6 responsive-margin-bottom">
            <div class="box primary">
                <h1>Primary Box</h1>
                <p>This is a paragraph</p>
            </div>
          </div> <!-- 25% -->
          <div class="col-8 col-m-6">
            <div class="box secondary">
                <h1>Secondary Box</h1>
                <p>This is a paragraph</p>
            </div>
          </div> <!-- 75% -->
        </div>
    </div>
</body>


* {
    box-sizing: border-box;
}

body {
}  

/*-------------Layout------------- */


#container {
}

/*----Grid---- */
.grid-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
    float: left;
}

@media only screen and (min-width: 700px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}

@media only screen and (min-width: 950px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

/*---- Box---- */

.box{
    padding: 25px;
    margin: 0 0 15px;
}

.box .primary{
    color: #fff;
    background-color: #74a57f;
}

.box .secondary{
    color: #fff;
    background-color: #077187;
}

我尝试过添加溢出：auto;到网格容器，但似乎没有帮助。谁知道我做错了什么？

干杯

Answer 1

你没有以正确的方式这样做，因为你写的是.box .primary以及.box .secondry， .box和{{1}之间有空格} / .primary，这就像你想要定位作为.secondry的子元素的元素，但实际上，你想要样式化的元素包含两个类。

所以正确的方法就是删除两个类之间的空格，告诉浏览器你要为具有两个类的元素设置样式。

＆＃13;
＆＃13;
.box
＆＃13;
* { box-sizing: border-box; } body { } /*-------------Layout------------- */ #container { } /*----Grid---- */ .grid-container { width: 100%; max-width: 1200px; margin: 0 auto; } /* For mobile phones: */ [class*="col-"] { width: 100%; float: left; } @media only screen and (min-width: 700px) { /* For tablets: */ .col-m-1 {width: 8.33%;} .col-m-2 {width: 16.66%;} .col-m-3 {width: 25%;} .col-m-4 {width: 33.33%;} .col-m-5 {width: 41.66%;} .col-m-6 {width: 50%;} .col-m-7 {width: 58.33%;} .col-m-8 {width: 66.66%;} .col-m-9 {width: 75%;} .col-m-10 {width: 83.33%;} .col-m-11 {width: 91.66%;} .col-m-12 {width: 100%;} } @media only screen and (min-width: 950px) { /* For desktop: */ .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} } /*---- Box---- */ .box{ padding: 25px; margin: 0 0 15px; } .box.primary{ /*no spaces between the two classes*/ color: #fff; background-color: #74a57f; } .box.secondary{ /*no spaces between the two classes*/ color: #fff; background-color: #077187; }
＆＃13;
＆＃13;
＆＃13;

检查更新后的Pandoc documentation。

Answer 2

.box和.primary之间不应该有任何空格。介于两者之间的空格意味着<body> <div class="grid-container"> <div class="row"> <div class="col-4 col-m-6 responsive-margin-bottom"> <div class="box primary"> <h1>Primary Box</h1> <p>This is a paragraph</p> </div> </div>  <div class="col-8 col-m-6"> <div class="box secondary"> <h1>Secondary Box</h1> <p>This is a paragraph</p> </div> </div>  </div> </div> </body>是primary class的后代，但事实并非如此。它们都引用相同的容器类，因此删除它们之间的空格，您可以使用box class和次要的相同标准。

.box.primary or just .primary指的是包含盒子和主要类的容器。

.box.primary指的是具有至少主要类的容器。

＆＃13;

.primary

＆＃13;

* {
    box-sizing: border-box;
}

body {
}  

/*-------------Layout------------- */


#container {
}

/*----Grid---- */
.grid-container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
	float: left;
}

@media only screen and (min-width: 700px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}

@media only screen and (min-width: 950px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

/*---- Box---- */

.box{
    padding: 25px;
    margin: 0 0 15px;
}

.box.primary{
	color: #fff;
	background-color: #74a57f;
}

.box.secondary{
	color: #fff;
	background-color: #077187;
}

＆＃13;

css背景颜色儿童不显示

2 个答案: