Question

如何在屏幕中心的div div中有一个关于div的问题，根据div的内部是自适应的无论屏幕有多大，最佳可以是一排三等于二的两个节目

.wrap {
  border: solid 1px;
  width: 100%;
  height: 50%;
  text-align: center;
  margin: 0 auto;
}
.wrap>.child {
  border: solid 1px red;
  min-width: 32%;
  height: 100%;
  float: left;
  margin: 0 auto;
}

<div class="wrap">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
</div>

Answer 1

这应该可以解决问题

.wrap {
  border: solid 1px;
  text-align: center;
  position: absolute;
  width: 100%;
  height: 50%;
  top: 2px;
  bottom: 2px:
  right: 2px;
  left: 2px;
}
.wrap>.child {
  border: solid 1px red;
  min-width: 32%;
  height: 100%;
  float: left;
  margin: 0 auto;
}

<div class="wrap">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
</div>

Answer 2

看起来您正在尝试创建三个相等宽度的列而无法使用33.3333%，您选择只是尝试将它们居中。首先，您遇到的最大问题是没有使用box-sizing:border-box。该规则将包括边界宽度和填充计算百分比宽度。所以你可以像这样编写你的代码：

.wrap {
  border: solid 1px;
  width: 100%;
  height: 50%;
  text-align: center;
  margin: 0 auto;
}
.wrap>.child {
  border: solid 1px red;
  min-width: 33.333%;
  box-sizing: border-box;
  height: 100%;
  float: left;
  margin: 0 auto;
}

<div class="wrap">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
</div>

它没有直接解决所述问题，但它可能就是你真正想要的。

如何使div div的内部居中

2 个答案: