CSS：只有一列内容具有 Package 元素时的两列布局

azpvetkf 于 2022-12-27 发布在其他

关注(0)|答案(2)|浏览(121)

给定以下结构：

<form>
  <label for="id_foo">Foo:</label>
  <input type="text" name="foo" required="" id="id_foo">
  <label for="id_bar">Bar:</label>
  <input type="text" name="bar" required="" id="id_bar">
  <label for="id_baz">Baz:</label>
  <input type="text" name="baz" required="" id="id_baz">
  <label>Select:</label>
  <div id="id_select">
    <div><input type="checkbox"><label>Test</label></div>
    <div><input type="checkbox"><label>Test</label></div>
    <div><input type="checkbox"><label>Test</label></div>
    <div><input type="checkbox"><label>Test</label></div>
  </div>
  <input type="submit">
</form>

而不修改HTML并且假设复选框的数量是稍微动态的。
这一点能否用两栏来表述：

输入字段逐个填充列
在一行内的每个输入上方带有标签
一列上项目的高度与另一列中项目的高度无关。

我知道这是trivial if I had a container for the tags of each column，但我想了解是否/如何有可能实现没有。
对于网格布局，I come close，但I复选框的数量将影响左侧输入字段/标签的高度。
对于columns/column-count，我似乎找不到控制中断的方法。
注：我不想修改html的原因主要是因为我使用的框架（Django）确实会让表单渲染变得相当麻烦。此外，这种特定的布局只适用于特定的屏幕大小。我不喜欢在头脑中调整不同的响应布局的html。在这种情况下，我愿意接受CSS中的一些额外复杂性，并希望弄清楚这是否可行。

css

来源：https://stackoverflow.com/questions/74907935/css-two-column-layout-when-only-one-column-content-has-a-wrapper-element

2条答案

按热度按时间

pcww981p1#

我所要做的是将#id_select放在右上方的绝对定位块中，这样可以防止它影响标签+输入的主要内容的高度。

form {
  position: relative;
  padding-right: 100px;
  /* make space for the #id_select block */
}

label,
input {
  display: block;
  /* make them fill in width to go one after another vertically */
}

#id_select {
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
}

<form>
  <label for="id_foo">Foo:</label>
  <input type="text" name="foo" required="" id="id_foo">
  <label for="id_bar">Bar:</label>
  <input type="text" name="bar" required="" id="id_bar">
  <label for="id_baz">Baz:</label>
  <input type="text" name="baz" required="" id="id_baz">
  <label>Select:</label>
  <div id="id_select">
    <div><input type="checkbox"><label>Test</label></div>
    <div><input type="checkbox"><label>Test</label></div>
    <div><input type="checkbox"><label>Test</label></div>
    <div><input type="checkbox"><label>Test</label></div>
  </div>
  <input type="submit">
</form>

赞(0）回复(0）举报 2022-12-27

f3temu5u2#

grid显示可以帮助您。defaut将绘制单个列，除非您指定元素位于另一列中。
如果你使用ID，你可以在任何有或没有ID的地方找到一些东西。
表单示例，无论有没有IDS，都是form{display:grid;}

/* defaut layout as a grid of one column , gap can be used */
form {
display:grid;
gap:0.5em;
padding:0.5em;
border:solid;
margin:1em;
}
/* element dispatched inside grid-column:2 , will make form draw 2 columns */
#id_select {
grid-column:2;
grid-row:2 / 6;
display:grid;
}
#label_select{grid-row:1;}
#id_select ~input[type="submit"] {
grid-row:6;
}
#label_select,
#id_select ~input[type="submit"] {
grid-column:2;
}

<h1>I'll be 2 columns !</h1>
<form>
  <label for="id_foo">Foo:</label>
  <input type="text" name="foo" required="" id="id_foo">
  <label for="id_bar">Bar:</label>
  <input type="text" name="bar" required="" id="id_bar">
  <label for="id_baz">Baz:</label>
  <input type="text" name="baz" required="" id="id_baz">
  <label id="label_select">Select:</label>
  <div id="id_select">
    <div><input type="checkbox"><label>Test</label></div>
    <div><input type="checkbox"><label>Test</label></div>
    <div><input type="checkbox"><label>Test</label></div>
    <div><input type="checkbox"><label>Test</label></div>
  </div>
  <input type="submit">
</form>
<h2>I'll be a single column</h2>
<form>
  <label for="id_foo">Foo:</label>
  <input type="text" name="foo" required="" id="id_foo">
  <label for="id_bar">Bar:</label>
  <input type="text" name="bar" required="" id="id_bar">
  <label for="id_baz">Baz:</label>
  <input type="text" name="baz" required="" id="id_baz">
  <label>Select:</label>
    <div><input type="checkbox"><label>Test</label></div>
    <div><input type="checkbox"><label>Test</label></div>
    <div><input type="checkbox"><label>Test</label></div>
    <div><input type="checkbox"><label>Test</label></div>

  <input type="submit">
</form>

赞(0）回复(0）举报 2022-12-27

我来回答

CSS：只有一列内容具有 Package 元素时的两列布局

2条答案

相关问题

热门标签

最新问答