除主div之外的响应块

时间:2018-07-27 15:05:13

标签: css css3

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

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

1 个答案:

答案 0 :(得分:0)

您可以使用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>