0

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

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

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

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

小提琴：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;
}

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

4

3 回答 3

0

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

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

$('.column').each(function() {
    var divider = $(this).parent().children().length;
    $(this).width($(this).parent().width() / divider);
});
于 2013-10-09T18:25:11.153 回答
0

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

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

于 2013-10-09T16:53:26.200 回答
0

这是你想做的吗？

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

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

于 2013-10-09T16:57:19.473 回答