代码之家 › 专栏 › 技术社区 › milan

两列窗体,每列中有动态行数

flexbox css html

milan · 技术社区 · 6 年前

我正在设计下面的表格,其中将有2列。每列可以有任意数量的表单域,如左列只能有一个表单域,右列只能有一个表单域,或左列可以有两个表单域,右列可以有三个表单域,反之亦然。

这是我试着用flex

.row {
  display: flex;
}

.input-wrapper {
  flex: 1;
  padding-left: 15px;
}

<div class="row">
  <div class="input-wrapper">
    <label>Additional Space</label>
    <select>
      <option>hello</option>
    </select>
  </div>
  <div class="input-wrapper">
    <label>Size</label>
    <input type="text" placeholder="length" />
  </div>
  <div class="input-wrapper">
    <label></label>
    <input type="text" placeholder="width" />
  </div>
  <div class="input-wrapper">
    <label></label>
    <select>
      <option>hello</option>
    </select>
  </div>
</div>

<br/><br/><br/><br/><br/>


<div class="row">
  <div class="input-wrapper">
    <label>Additional Space</label>
    <select>
      <option>hello</option>
    </select>
  </div>
  <div class="input-wrapper">
    <label>Size</label>
    <input type="text" placeholder="length" />
  </div>
</div>

这是设计图

1 回复 | 直到 6 年前

Itay Gal 6 年前

首先,你需要设置 width: 100% 要跨越的输入类型。在您的布局中,容器已经占据了整个宽度。

你也应该使用 display:flex 在你的 input-wrapper 并设置

flex-direction: column;
justify-content: flex-end;

.row {
  display: flex;
}

.input-wrapper {
  flex: 1;
  padding-left: 15px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}


select{
  width: 100%;
}

select, input{
  border: 1px solid #e1e1e1;
  padding: 6px;
  border-radius: 3px;
}

label{
  font-size: 14px;
  color: #d1d1d1;
  margin-bottom: 4px;
}

<div class="row">
  <div class="input-wrapper">
    <label>Additional Space</label>
    <select>
      <option>hello</option>
    </select>
  </div>
  <div class="input-wrapper">
    <label>Size</label>
    <input type="text" placeholder="length" />
  </div>
  <div class="input-wrapper">
    <label></label>
    <input type="text" placeholder="width" />
  </div>
  <div class="input-wrapper">
    <label></label>
    <select>
      <option>hello</option>
    </select>
  </div>
</div>

<br/><br/><br/><br/><br/>


<div class="row">
  <div class="input-wrapper">
    <label>Additional Space</label>
    <select>
      <option>hello</option>
    </select>
  </div>
  <div class="input-wrapper">
    <label>Size</label>
    <input type="text" placeholder="length" />
  </div>
</div>

推荐文章

Luca Phillips · 当表是div flex的子级时,它有巨大的空间

2 年前

Nishit Agrawal · Flexbox-将第三项与第二项对齐

2 年前

alan · 有没有办法向flexbox图像添加链接?

2 年前

Gary · CSS在弹性方框布局中用句点字符串填充段落剩余部分的方法?

2 年前

n1234 · Flexbox-图像和内容

6 年前

nCardot · 为什么是!h1元素媒体查询工作所需的重要信息?[副本]

6 年前

Adam Olsson · 在中心CSS中对齐单个列表项

6 年前

London804 · 我是否可以使设置为对齐内容的元素:换行时间距向右对齐?

6 年前

user3137124 · 当“flex direction”为“column”时,如何将div与顶部对齐?[副本]

6 年前

AJ- · 无法垂直对齐文本-angularJS+bootstrap+flexbox

6 年前