Question

所以这是我的问题，我有一个名为div的{{1}}，在这个div中有多个类，tiles和tile-small。现在每个类都有不同的属性，例如，类tile-large具有更大的宽度值，而tile-large具有更小的宽度值，现在这些属性似乎正确显示，但是，每个类都具有它{ {1}} div定义的属性tile-small。多个类应显示background-color的背景颜色，类tiles似乎显示背景颜色，但类#fff不显示。如何更正我的代码并让两个类显示我在div中定义的背景颜色？

以下是整个HTML代码; （使用tile-large标记中的CSS值。）

tile-small

这是显示我的问题的图片。

enter image description here

如您所见，第二个类（白色框下方的绿色条）没有添加背景颜色。

下面是我希望我的代码显示的内容;

enter image description here

Answer 1

正如我在你对你的问题的评论中已经说过的那样，你不能做你做的事情。这是完全错误的。

相反，这是一个很好的（简化）示例，如何设置CSS样式，并获得所需的结果：

*{margin:0;}

h3{ /*Style your selectors here, not all around the stylesheet*/
  background: #C4E66E;
  padding: 0.7em;
}
p{ /* Styles for all your paragraph elements */
  padding: 0.4em 0.7em;
}
#content{ /* no white background or similar. it's a container, use it as such */
  margin: 0 auto;
  width: 97%;
}
.tile{    /* General .tile styles (applies to all .tile) */
  background: #fff;
  box-shadow: 0 2px 3px #CCC;
  float: left;
  margin: 10px 1%;
}
.tile-large{ width: 98%; } /* Than create an additional class for "large" ones */
.tile-small{ width: 48%; } /* and for "small" ones */

<div id="content">

  <div class="tile tile-large">
    <h3>Is there football on Wednesday?</h3>
    <p>Hello world</p>
  </div>

  <div class="tile tile-small">
    <h3>Attending Players</h3>
    <p>Hello CSS</p>
    <p>
      Hello again and another paragraph here<br>
      Lorem ipsum sackus overflovius
    </p>
  </div>

  <div class="tile tile-small">
    <h3>match results</h3>
    <p>
      Hello again and another paragraph here<br>
      Lorem ipsum sackus overflovius
    </p>
  </div>

</div>

Answer 2

这似乎是一个毫无疑问的问题。 #fff div的#tiles样式将应用于未被覆盖的所有元素。因此，如果.tile-small下方有更多文字，#tiles的白色背景将适用于此。

Answer 3

将您的css和html更改为此。它将显示您的需求。

<style>
@font-face { font-family: title; src: url('fonts/title.ttf'); } 
body {background-color: #efefef;margin-top: 15px;}
::selection {
background: #93CC04; /* WebKit/Blink Browsers */
}
::-moz-selection {
background: #93CC04; /* Gecko Browsers */
}
#content {
    margin-left: auto;
    margin-right: auto;
    width: 97%;
}
#tiles {
    background-color: #fff;
    height: 200px;
    margin-left: auto;
    margin-top: auto;
    border: 0px;
    border-style: solid;
    border-color: #fff;
    box-shadow: 5px 0 5px -5px #CCC, 0 5px 5px -5px #CCC, -5px 0 5px -5px #CCC;
}
#tiles2 {
    background-color: #fff;
    height: 200px;
    width: 50%;
    float:left;
    margin-left: auto;
    margin-top: auto;
    border: 0px;
    border-style: solid;
    border-color: #fff;
    box-shadow: 5px 0 5px -5px #CCC, 0 5px 5px -5px #CCC, -5px 0 5px -5px #CCC;
}
.tile-large {
    background-color: #C4E66E;
    height: 50px;
}
.tile-small {
    background-color: #C4E66E;
    height: 50px;
    width: 50%;

}
.center-text {
    text-align: center;
    color: #1f1f1f;
}
.left-text {
    float: left;
    color: #F7F7F7;
    line-height: 40px;
    padding: 5px;
    font-family: title;
    font-size: 18px;
}
h2 {
    line-height: 100px;
}
</style>

并将您的HTML更改为

<div id="content">
    <div id="tiles">
        <div class="tile-large"><p class="left-text">Is there football on Wednesday?</p></div>
        <h2 class="center-text">Yes, there is football on Wednesday the 14th of January.</h2>
    </div>
    <br>
    <div id="tiles2">
        <div class="tile-small"><p class="left-text">Attending Players</p></div>
    </div>

Answer 4

问题是您是手动设置tiles div的高度，内容扩展到该点以下。亚当指出，背景只有200像素高，即使内容将继续经过背景停止的地方。

但是，如果您真正想要做的是让背景与所有内容的高度相匹配，那么完全省略该行。只需将瓷砖样式更改为：

#tiles {
    background-color: #fff;
    margin-left: auto;
    margin-top: auto;
    border: 0px;
    border-style: solid;
    border-color: #fff;
    box-shadow: 5px 0 5px -5px #CCC, 0 5px 5px -5px #CCC, -5px 0 5px -5px #CCC;
}

我附上了一个jsfiddle链接来演示。

http://jsfiddle.net/hytvg22c/

Div内部的类没有正确显示

4 个答案: