如何在没有计算的情况下实现双列布局？

Question

我想实现类似于以下的布局

左右是自适应的，固定在中间。

没有计算。

谢谢，我的英语不好。

例如：https://jsbin.com/qajiqi/edit?html,css,output

＆＃13;

＆＃13;

.wrap {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
input {
  display: block;
  width: calc(50% - 4px);
}
.left {
  float: left;
}
.right {
  float: right;
}

＆＃13;

<div class="wrap">
  <input type="button" value="left" class="left">
  <input type="button" value="right" class="right">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的问题有点不清楚，但我提出了this JSFiddle。

我使用了flexbox，它同时处理元素宽度和浮动。您可以在其上阅读方便的指南here或通过Google搜索＆＃34; flexbox＆＃34;。

具体来说，我使用.wrap将display: flex;变为了弹性箱。我还确保使用align-items: flex-start;按钮不会变得太高。您可以尝试删除它以查看会发生什么，或者阅读更多相关信息on MDN。我将宽度设为50％，并为每个人增加了一个余量。 flexbox负责为您调整大小。