0

我遇到的问题应该很简单，可以解决，但我对 flexbox 的了解不够了解正在发生的事情。

我试图让两个 div 并排放置，它们之间有一些空间，但我根本无法调整它们的宽度。

html(jsx) 代码如下所示：

        <Col className="DivA"  xs={12} sm={12} md={12} lg={3}>
           //stuff
        </Col>

        <Col  className="DivB" xs={12} sm={12} md={12} lg={9}>
           //stuff
        </Col>

和CSS：

.DivA {
    height: 700px;
    float: left;
    width: flexbox keeps width at 100% of whatever space its allowed
}

.DivB {
    height: 700px;
    float: right;
}

我可以调整边距，但它会将另一个 div 移到第一个 div 之下。我可以调整所有其他属性，除了宽度。我希望 div 在它们之间有空间，但我没有尝试过任何工作。

我不知道这个属性是从哪里来的，甚至把 !important 放在 css 中也没有用。

编辑：通过在 DivA 中更改 lg={2.5} 并在 DivB 中添加 margin-left 找到了一种解决方法，但我仍然想知道是否有更好的方法..

4

1 回答 1

2

请勿float与flex. 没用的。更好的是，在布局方面根本不要使用float。

您可以flex在容器上与justify-content: space-between.

例如我添加的目的width: calc(50% - 20px)，这意味着它们之间将有 40px 的空间。

见下文

.wrapper {
  display:flex;
  width: 100%;
  justify-content: space-between;
}

.item {
  height:50px;
  background: red;
  width:calc(50% - 20px);
}
<div class="wrapper">
  <div class="a item">
  </div>
  <div class="b item">
  </div>
</div>

于 2019-05-13T11:57:09.633 回答