Question

我创建了一个容器。容器中的纯文本显示在容器内，但是，格式化文本显示在容器外部。请给出建议。我的html和css发布在下面。

这是我的HTML：

.left-column {
  text-align: left;
  float: left;
  width: 40%;
  padding-left: 5px;
}
.right-column {
  text-align: left;
  float: left;
  width: 50%;
  padding-left: 200px;
}
#container {
  width: 900px;
  background-color: #ffffff;
  border: 1.5px solid #FFCC99;
  margin: 0;
  padding: 10px;
}
.border1 {
  width: 910px;
  border: 3px solid #376092;
  margin: 1px;
  padding: 2px;
}
border2 {
  width: 915px;
  border: 2px solid #FFCC99;
  margin: 12px auto 12px auto;
}

<main id="gap">
  <div class="border2">
    <div class="border1">
      <div id="container">
        <div class="left-column">
        </div>
        <div class="right-column">

        </div>

      </div>
      <!-- End Container -->
    </div>
    <!-- End Border1 -->
  </div>
  <!-- End Border2 -->
</main>

Answer 1

因为float和.left-column .right-column，您应该使用clearfix

另外，我建议您使用box-sizing:border-box，详情了解border box model

这是一个片段：

.cf:before,
.cf:after {
  content: " ";
  display: table;
}
.cf:after {
  clear: both;
}
*, *:before, *:after {
  box-sizing: border-box;
}
.left-column {
  text-align: left;
  float: left;
  width: 40%;
  padding-left: 5px;
}
.right-column {
  text-align: left;
  float: left;
  width: 50%;
  /*padding-left: 200px; - this can be removed */
}
#container {
  width: 900px;
  background-color: #ffffff;
  border: 1.5px solid #FFCC99;
  margin: 0;
  padding: 10px;
}
.border1 {
  width: 910px;
  border: 3px solid #376092;
  margin: 1px;
  padding: 2px;
}
.border2 {
  width: 915px;
  border: 2px solid #FFCC99;
  margin: 12px auto 12px auto;
}

<main id="gap">
  <div class="border2">
    <div class="border1">
      <div id="container" class="cf">
        <div class="left-column">text left</div>
        <div class="right-column">text right</div>
      </div>
      <!-- End Container -->
    </div>
    <!-- End Border1 -->
  </div>
  <!-- End Border2 -->
</main>

Answer 2

在overflow:hidden中设置#container。这将迫使容器尊重其中所有元素的高度，无论浮动元素如何。

<强> CSS

#container {
      width:900px;
      background-color: #ffffff;
      border:1.5px solid #FFCC99;
      margin: 0;
      padding:10px;
      overflow: hidden; /* Set this rule */
    }

<强> DEMO HERE

Answer 3

问题是你的#container上的填充。

你的css是：填充：10px和宽度：910px

所以，你的填充增加20px（右10px，左10px）。

最后，你的#containter宽度是920px而你的父div是910px。

要解决您的问题，您需要将父级的宽度设置为920或将填充更改为：padding：5px;

格式化文本显示在浮动容器

3 个答案: