gpt4 book ai didi

html - 垂直分布div

转载 作者:行者123 更新时间:2023-11-28 10:35:33 25 4
gpt4 key购买 nike

如何垂直均匀分布子元素?例如,如果我有一个包含 3 个输入字段的 div,每个字段都设置为 100% 宽度,我希望它们均匀分布在三行中,即图中的 33.33% 高。此外,如果有 2 个字段,我希望它们位于两行中,每行 50% 高,而不需要明确设置它们。有什么想法吗?

enter image description here目前,我的代码将所有输入字段集中在顶部,如下面的代码片段所示。

input { width: 60%;}
.whole-container { height: 300px;background: yellow;}
<body>
<div class="whole-container">
<form id="login-form" method="POST">
<input name="name" type="text" placeholder="Your name" id="cf-nameInput">
<input name="email" type="email" placeholder="your@email" id="cf-emailInput">
<input name="tel" type="tel" placeholder="Phone number" id="cf-phoneInput">
</form>
</div>
</body>

最佳答案

你可以使用 flex :

input { 
width: 60%;
}

.whole-container {
height: 300px;
background: yellow;
}

.whole-container form {
height:100%;
display:flex;
flex-direction:column;
justify-content:space-around;
}
<body>
<div class="whole-container">
<form id="login-form" method="POST">
<div><input name="name" type="text" placeholder="Your name" id="cf-nameInput"></div>
<div><input name="email" type="email" placeholder="your@email" id="cf-emailInput"></div>
<div><input name="tel" type="tel" placeholder="Phone number" id="cf-phoneInput"></div>
</form>
</div>
</body>

关于html - 垂直分布div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37923158/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com