父div不随子div扩展

时间：2018-06-22 22:41:45

标签： html css

我有以下代码：

@charset "utf-8";

/* CSS Document */

body {
  background-color: aliceblue;
  font-family: 'Sintony', sans-serif;
}

.headerspan {
  width: 100%;
  height: 100%;
  background-color: #009EE3;
  border-bottom: thick solid #F39200;
}

.headercontainer {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  float: none;
  clear: both;
}

.phonenumber {
  text-align: center;
  height: 2em;
  line-height: 2em;
  color: #ffffff;
  font-size: 1.5em;
  font-weight: 700;
}

.responsiveimg {
  max-width: 100%;
  height: auto;
  border: none;
  margin: 0.25em;
}
<body>

  <div class="headerspan">
    <div class="headercontainer">
      <div class="section group">
        <div class="col span_6_of_12">
          <img class="responsiveimg" src="images/logo.png">
        </div>
        <div class="col span_6_of_12 phonenumber">
          Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
        </div>
      </div>
    </div>
  </div>

</body>

最后一个子div中的文本溢出，并且父级不扩展。有人能对此有所启示吗？谢谢。

Image of the current output in a browser

1 个答案:

答案 0 :(得分：2)

将height:2em;的{​​{1}}更改为min-height:2em; 

.phonenumber
@charset "utf-8";

/* CSS Document */

body {
  background-color: aliceblue;
  font-family: 'Sintony', sans-serif;
}

.headerspan {
  width: 100%;
  height: 100%;
  background-color: #009EE3;
  border-bottom: thick solid #F39200;
}

.headercontainer {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  float: none;
  clear: both;
}

.phonenumber {
  text-align: center;
  min-height: 2em;
  line-height: 2em;
  color: #ffffff;
  font-size: 1.5em;
  font-weight: 700;
}

.responsiveimg {
  max-width: 100%;
  height: auto;
  border: none;
  margin: 0.25em;
}

相关问题
最新问题