这是jsFiddle
假设我有以下 HTML:
<div class="Trigger">click here</div>
<div id="TheContainer">
<div class="One">this is some text</div>
<input type="button" class="Two" value="button 1" />
<input type="button" class="Three" value="button 2" />
</div>
和以下CSS:
#TheContainer{
width:500px;
height:40px;
padding:10px 30px;
display:none;
background:red;}
.One{float:left;}
.Two{float:left;}
.Three{float:left;}
我使用以下 javascript 来显示/隐藏容器:
$(document).ready(function () {
$('.Trigger').click(function () {
var TheContainer = $('#TheContainer');
if (TheContainer.is(':visible') === false) {
TheContainer.show();
} else {
TheContainer.hide();
}
});
});
如您所见,我们有一个固定宽度的隐藏容器,其中包含 3 个元素:1 个 div 和 2 个按钮,所有 3 个元素的大小都是可变的,因为这些元素的文本在运行时会发生变化。
我希望将 3 个子元素水平分布在容器内。我环顾四周,由于各种原因,现有的解决方案似乎都不适用于这种特殊情况。
如何仅使用 CSS 水平且均匀地分布这些元素? 注意:我知道我可以在 jQuery 中通过计算宽度然后绝对设置位置来做到这一点,但我正在寻找是否有仅 CSS 的解决方案。
谢谢