html - 如何使用 CSS 对齐列以便它们共享整个面板

Question

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

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

我没有使用 <table>或 <tr>或此类标签，我将 CSS 与 <div> 结合使用来布置我的 table 。

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

fiddle :http://jsfiddle.net/Rm5VT/

HTML(剪切):

<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

您 float 了您的 div 但没有为它们指定宽度。当您 float 一个元素时，它会根据需要占用尽可能多的空间，不多也不少。

现在设置宽度，这取决于您希望它们看起来如何。