Question

我正在尝试创建一个小元素图。

＆＃13;

html {
  width: 100%;
  height: 100%;
}
body {
  width: 100%;
  height: 100%;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
div .row {
  width: 100%;
  margin-bottom: 2%;
}
div .row .col4 {
  padding-right: 2%;
  display: inline-block;
  width: 33.3%;
}
.myGraph {
  background: #208FBF;
  width: 100%;
  display: inline-block;
}

＆＃13;

<div>
  <div class="row">
    <div class="col4">
      <span class="myGraph">will show</span>
    </div>
    <div class="col4">
      <span class="myGraph"></span>
    </div>
    <div class="col4">
      <span class="myGraph"></span>
    </div>
  </div>
</div>

＆＃13;

问题是只有填充的myGraph元素才会显示背景颜色。为什么会这样？我希望myGraph类始终具有背景颜色。

由于

Answer 1

默认高度为0，如果您没有内容...插入文本，实体或图片，或给div增加高度，您将看到

Answer 2

我对您的代码进行了一些修改：

的style.css

  html {
  width: 100%;
  height: 100%;
}

body {
   width: 100%;
   height: 100%;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

div .row {
    width: 100%;
    margin-bottom: 2%;
}

div .row .col4 {
    padding-right: 2%;
    display: inline-block;
    min-width: 30%;
    background: #Fa1;
}

div .row .full-charge { 
  display: inline-block;
  min-width: 100%;
}

.myGraph {
       min-width:0%;
       background: #aa1;
       display: inline-block;
}

的index.html

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div>
    <div class="row">
        <div class="col4">
            <span class="myGraph" style="width:50%">
              <div class="full-charge">
              </div>
            </span>
        </div>
        <div class="col4">
            <span class="myGraph" style="width:80%">
               <div class="full-charge">
               </div>
            </span>
        </div>
        <div class="col4" style="background: #Fa1;">
            <div class="myGraph" style="width:20%">
              <div class="full-charge">
              </div>

            </div>
        </div>
    </div>
</div>
</body>

</html>

DEMO：http://plnkr.co/edit/G0tjLubUYcNWepXCbKgH?p=preview

除非已填充，否则子div不会显示其背景颜色

2 个答案: