Question

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

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

我没有使用<table>或<tr>或类似标签，我正在使用带有<div>的CSS来制作我的桌子。

面板只有一行和一定数量的列..（4,5或7），具体取决于我使用它的位置。

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

你浮动了你的div但你没有指定它们的宽度。当你浮动一个项目时，它将占用所需的空间，仅此而已。

现在要设置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);
});

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

3 个答案: