Question

我正在努力实现这种布局。

左栏固定尺寸
右列流体，内部可能有x个元素，例如最多4个div 50px宽（这是动态完成的）所以它必须是最大200px宽，或者如果它有3个这样的元素，那么它必须是150px宽......
中心柱液，占用所有剩余空间

我最接近的是：

＆＃13;

#container {
    overflow:hidden;
    width: 100%;
}

#leftcol {
    border: 1px solid #0f0;
    float: left;
    width: 80px;
}

#rightcol {
    border: 1px solid #0f0;
    float: right;
   
}

#centercol {
    border: 1px solid #000;
    margin-left: 80px;

}
.box{
  width:50px;
  height:20px;
  background:red;
  float:left;
}

＆＃13;

<div id="container">

  <div id="leftcol">
    fixed 80px
  </div>
  <div id="rightcol">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
  </div>
  <div id="centercol">
    fluid center
  </div>

</div>

＆＃13;

但中心液体的宽度不正确。

如果更容易达到预期的效果，我可以更改一些HTML。

Answer 1

您可以使用 Flexbox 执行此操作：

from itertools import chain


char_set = set(chain.from_iterable(characters.values()))

def count(password, chars):
    sanitized_pass = [char for char in password if char in char_set]
    return sanitized_pass, len(sanitized_pass)

body {margin: 0}

#container {
  display: flex; /* displays flex-items (children) inline */
  overflow: hidden;
}

#leftcol {
  border: 1px solid #0f0;
  width: 80px;
}

#centercol {
  flex: 1; /* takes the remaining horizontal space */
  border: 1px solid #000;
}

#rightcol {
  display: flex;
  border: 1px solid #0f0;
  max-width: 200px; /* adjust to your needs */
}

.box {
  width: 50px;
  height: 20px;
  background: red;
}

CSS 2流体1固定柱

1 个答案: