Question

我试图找出一种方法让其中一个网格元素自动填充其他具有固定宽度的元素之间的宽度间隙，因此无论父级有多宽，它们将一起填充其父元素的宽度元素是。有人可以告诉我，如果我想做的事情是可能的，如果是的话，应该如何正确地完成。

这是我想要实现的目标的形象：

Answer 1

这是使用flexbox执行您要求的一种方式。

      <style>

        .row {
          display: flex;
          display: -webkit-flex;
          flex-direction: row;
          -webkit-flex-direction: row;
        }
        .col-left {
          flex: 1;
          min-width: 120px;
        }
        .col-center {
          flex: 3;
        }
        .col-right {
          flex: 1;
          min-width: 120px;
        }

              </style>
            </head>
              <body>

                <section>
                  <div class="row">
                    <div class="col-left" style="background-color: lightgreen; height: 20em;">
                    </div>

                    <div class="col-center" style="background-color: violet; height: 20em;">
                    </div>

                    <div class="col-right" style="background-color: lightgreen; height: 20em;">
                    </div>

                  </div>
                </section>

    </body>

DEMO

Answer 2

这里有一个css，但是你需要提到占据整个空间的剩余百分比的宽度。

    .container {
    width:600px;
    height:200px;
    border:1px solid;
    background:yellow;
    display:table-row;
}
.left {
    width:200px;
    height:20%;
    background:red;
    overflow:hidden;
        display:table-cell;
}
.right {
    height:200px;
    width:20%;
    background:blue;
    display:table-cell;
}
.middle {
    height:200px;
    width: 60%;
    background:green;
    display:table-cell;
}

如果您将div的宽度硬编码为某些像素，那么您可以使用calc属性并减去容器宽度的100％来获得结果

Bootstrap网格设置 - 在固定元素的中间有一个自动调整元素

2 个答案: