如何将列与 CSS 对齐，以便它们共享整个面板

Question

我正在尝试在面板上分配一定数量的列，但宽度不同，我只想让它们占据整个面板，宽度不同，以便整行都充满了面板。

现在它们有不同的宽度，但只占面板宽度的 70%。

我没有使用<table>或<tr>或这样的标签，我使用带有<div>的CSS来制作我的表格。

面板只有一行和一定数量的列。(4,5 或 7(取决于我在哪里使用它。

小提琴：http://jsfiddle.net/Rm5VT/

网页(剪切(：

<wicket:panel>
        <div class="separator">Gen I</div>
        <div class="row">
            <div class="gen-i">
                <div class="column">
                    <!-- mfr -->
                    <div class="field">
                        <span class="field-name">Mfr</span> 
                        <div class="value">
                            <select name="Mfr" wicket:id="mfr"></select>
                        </div>
                    </div>
                    <!-- s cd -->
                    <div class="field">
                        <span class="field-name">S cd</span> 
                        <div class="value">
                            <input wicket:id="sCd" type="text" />
                        </div>
                    </div>
                    <!-- N pts -->
                    <div class="field">
                        <span class="field-name">N Pts</span> 
                        <div class="value">
                            <input  wicket:id="nPts" type="text" />
                        </div>
                    </div>
                </div>
                <div class="column">
                    <!-- atv-->
                    <div class="field">
                        <span class="field-name">Atv</span>
                        <div class="value">
                            <span wicket:id="atv"></span>
                        </div>
                    </div>
                    <!-- p sys -->
                    <div class="field">
                        <span class="field-name">P Sys</span>
                        <div class="value">
                            <span wicket:id="partOfSystem"></span>
                        </div>
                    </div>
                </div>
                <div class="column">
                    <!-- ty dvc -->
                    <div class="field">
                        <span class="field-name">Ty</span> 
                        <div class="value">
                            <textarea wicket:id="ty"></textarea>
                        </div>
                    </div>
                    <!-- foa -->
                    <div class="field">
                        <span class="field-name">FoA</span> 
                        <div class="value"> 
                            <select wicket:id="foa"></select>
                        </div>
                    </div>
                </div>  
            </div>
        </div>
    </wicket:panel>  

CSS(剪切(：

.separator
{
color: #FEFDFD;
background-color: #4984BD;
text-align: center;
font-size: 15px;
font-family: Verdana, sans-serif;
font-weight: bold;
}
.row
{
background-color: lightyellow;
display: table;
width: 100%;
}
.column
{ 
float: left;
display: table-column;
}

谢谢你的帮助(希望你明白我的意思(

Answer 1

你浮动了你的div s，但你没有为它们指定宽度。当您浮动一个项目时，它会根据需要占用尽可能多的空间，仅此而已。

现在要设置 width ，这取决于您希望它们的外观。

Answer 2

这是你想做的吗？

.field {
float:left;
display:block;
}

在所有字段之后，您可以添加带有清除浮点数的div。

Answer 3

这是我认为你的意思的小提琴。我保持原样，但添加了一些jquery：

http://jsfiddle.net/Hive7/Rm5VT/1/

$('.column').each(function() {
    var divider = $(this).parent().children().length;
    $(this).width($(this).parent().width() / divider);
});