gpt4 book ai didi

html - 设置每个 Column DIV 控件的固定宽度

转载 作者:行者123 更新时间:2023-11-28 10:21:19 25 4
gpt4 key购买 nike

我使用 DIV 控件编写了表格结构。只有当列值具有相同长度的字符时,它才能正确显示数据。如果列值具有不同数量的字符,则列会自行扩大以容纳列中的所有字符。如何设置每列DIV的FIX宽度?

我有以下 HTML DIV 结构:

<body>
<div class="ParentContainer">
<div id="row1" class="row">
<div>
<label id="row1_to" class="divLabel">contact1@test.com
</label>
</div>
<div>
<label id="row1_from" class="fromLabel">test1@something.com
</label>
</div>
<div>
<label id="row1_subject" class="subLabel">Need to create new organization1
</label>
</div>
</div>
<div id="row2" class="row">
<div>
<label id="row2_to" class="divLabel">contact2@test.com
</label>
</div>
<div>
<label id="row2_from" class="fromLabel">test2@something.com
</label>
</div>
<div>
<label id="row2_subject" class="subLabel">Need to create new organization2
</label>
</div>

</div>
</div>
</body>

CSS 如下:

.ParentContainer
{
margin: 0 auto;
width: 960px;
table-layout:fixed;
}
.row
{
background-color: #FFFFFF;
border-bottom-style: solid !important;
border-bottom-width: 1px !important;
border-color: #CFD4DA;
font-size: 12px;
}
.row > div
{
display: inline-block;
}
.row:hover
{
background-color: #CEE3F6 !important;
}
.rowSelected
{
background-color: #CEE3F6;
}
.fromLabel
{
position: relative;
left: 64px;
}
.subLabel
{
position: relative;
left: 120px;
}

请提出建议。

最佳答案

您忘记将那些 div 样式设置为 table:

相关 CSS:

.ParentContainer {
display: table;
...
}
.row {
display: table-row;
...
}
.row > div {
display: table-cell;
...
}

演示:http://jsfiddle.net/abhitalks/824hw/1/

关于html - 设置每个 Column DIV 控件的固定宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23989354/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com