Question

我有一个宽度为100％的div。调整浏览器大小后，div会调整大小以保持浏览器宽度的100％。在div里面还有三个div，宽度为200px。当浏览器扩展到600px宽时，所有的div都很好地并排，就像我想要的那样。但是如果你将浏览器拉伸到599px或更低，一个或两个div会被击倒一行并出现在其他不理想的div之下。

所以我想要的是div总是保持并排并同样改变宽度。因此，如果我将浏览器宽度更改为例如150px，那么并排的三个div的宽度均为50px。

仅使用CSS和HTML代码是否可行？我不认为我需要提供我的代码，因为它只是在另一个div中的三个div。

Answer 1

您可以使用 Flexbox 执行此操作：

＆＃13;

/usr/local/bin/groovy

＆＃13;

body {margin: 0}

.parent {
  display: flex; /* displays flex-items (children) inline */
}

.child {
  flex: 0 1 200px; /* initial width of 200px */
  text-align: center;
}

.red {background: red}
.green {background: green}
.blue {background: blue}

＆＃13;

Answer 2

＆＃13;

.parent {
  display: block;
}
 .child{
   width: 32.5%;
   border:1px solid red;
   float:left;
}

＆＃13;

<div class="parent">
  <div class="child">One</div>
  <div class="child">Two</div>
  <div class="child">Three</div>
</div>

＆＃13;

Answer 3

您可以将这些设置应用于三个DIV。

.my_div {
  width: 33%;
  max-width: 200px;
}

这将确保三个DIV始终适合容器（33％宽度），但是如果容器宽度超过600px，则每个DIV永远不会超过200px。

如何自动化三个div的宽度以适应容器？

3 个答案: