Question

我正在尝试制作两列布局：

1st Col：最大宽度为200px 第二列：填补剩余空间

我尝试过几个例子但是还没有达到预期的效果。

由于第1列不是固定宽度，因此绝对定位并向第2列添加左边距会留下空间距。

任何人都可以帮助我吗？

Answer 1

您可以查看现代浏览器已经很好支持的flexbox。

快速概述：http://learnlayout.com/flexbox.html
更详细：https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

或者如果您的用例非常简单，您可以在CSS中使用calc函数。例如：

#first {
    width: 200px;
}

#second {
    width: calc(100% - 200px);
}

Answer 2

您可以使用 Flexbox

执行此操作

.content {
  display: flex;
  min-height: 100vh;
}

.col:nth-child(1) {
  max-width: 200px;
  background: lightblue;
}

.col:nth-child(2) {
  flex: 1;
  background: lightgreen;
}

<div class="content">
  <div class="col"><strong>Col 1</strong><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur odit necessitatibus illum officiis. Qui fugiat quisquam sequi, vel maxime earum id, officiis labore itaque debitis dolor laboriosam ipsam, dignissimos ullam. </div>
  <div class="col"><strong>Col 2</strong></div>
</div>

具有一个最大宽度列的流体柱

2 个答案: