除主div之外的响应块

Question

我的身体上有一个主要的DIV {width:100%; max-width: 900px}。

我需要在左自由空间上再放置一个DIV，在右空间上再放置一个DIV。不用Java语言就能完成吗？

Answer 1

您可以使用flex实现所需的功能：

.container {
  display:flex;           /* make container flex */
  flex-direction:row;     /* line up children in a row */
  width:100%;
}
.center {             /* this is your main div */
  width: 100%;
  max-width: 900px;  

  height: 200px;      /* test value only */
  background:green;
}

.col {
  flex-grow:1;        /* make side columns grow to fill any remaining space */
  background:blue;
}

<div class="container">
  <div class="col"></div>
  <div class="center"></div>
  <div class="col"></div>
</div>