时间戳

首页 > 解决方案 > 除主 div 外的响应块

css - 除主 div 外的响应块

问题描述

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

我需要在左边的可用空间上再放置一个 DIV，在右边的空间上再放置一个。可以在没有 Javascript 的情况下完成吗？怎么做？

标签： css

解决方案

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

推荐阅读