Question

我正在制作一个简单的3列布局＆＃34;，基本设置是两个固定宽度的列和一个（中心）列，它伸展以填充剩余的宽度。

现在有一个小小的插件＆＃34;对于那个简单的布局：我希望中心列有一个定义的最小宽度，css有一个属性，所以看起来很容易：

.content div {
  border:1px solid #bbb;  
  box-sizing: border-box;
}

.content-left {
  float: left;
  width: 200px;
}

.content-main {
  margin-left: 200px;
  margin-right: 200px;
  min-width: 200px
}

.content-right {
  float: right;
  width: 200px;
}

然而，这给出了一个重要的问题：主列击中＆＃34;最小宽度＆＃34; （通过拖动下面测试链接中的分隔线来测试它），它开始与左右列重叠。 - 我真的希望它能够拉伸引入水平滚动条的页面。

fiddle to test it

Answer 1

这应该这样做：

[layout] {
  display: flex;
}
#left {
  flex: 0 0 180px;
  background-color:#f00;
  margin-right: 20px;
}
#right {
  flex: 1 0 300px;
  background-color:#0ff;
}

<div layout>
    <div id="left">
        left
    </div>
    <div id="right">
        right
    </div>
</div>

有关详细信息，请参阅flex。在这种情况下执行繁重的工作是flex-shrink和flex-grow。默认值为flex-wrap，即nowrap。

不要忘记prefix。

另请注意300px的{{1}}值flex-basis flex元素的缩写中的第三个值。在这种情况下，它是该元素的最小宽度。得到这个大小，滚动条出现。

这里有3列：

#right

[layout] {
  display: flex;
}
[layout] > * {
  padding: 1rem;
}
#left, #right {
  flex: 0 0 180px;
}
#left {
  background-color:#f00;
}
#right {
  background-color:#0ff;
}
#middle {
  flex: 1 0 300px;
  margin: 0 10px;
  border: 1px solid #eee;  
}

旁注：似乎没有人告诉过你，你想要实现的横条是他们发明响应式布局时世界其他地方试图避免的。它被认为是非常糟糕的用户体验，谷歌降低了不具备响应式布局的网站的排名长话短说，它将失去你（或客户）的严重金钱。网站越重要，损失就越重要。更好的用户体验是将左侧和右侧边栏转换为小型设备上的可滑动抽屉。

css浮动divs minwidth而不重叠

1 个答案: