我正在尝试采用类似表格的布局,药物名称出现在左侧,数据占据表格的其余部分。简单地说:
+-------------+------------+
medicine 1 | some data | some data |
+-------------+------------+
medicine 2 | some data | some data |
+-------------+------------+
因为我想保持数据网格动态,我使用两个 <div>
的风格 display:table-cell
作为两个容器,左边一个用于所有药物名称,右边一个用于数据网格。里面有几个<div>
在这两个表格单元格内 <div>
的,但我不确定为什么当我使用 Chrome 检查界面进行调查时,左边的顶部有一个大的填充区域(请参见下图):
我不太确定哪一部分出了问题,而且检查界面没有给我似乎相关的信息。我想学习如何处理这种情况。这是供您引用的 html 代码:
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell">
<div style="height:85px; width:170px; text-align:right; font-size:13px; margin-right:5px">
Dexedrine Spansules (Dextroamphetamine, ER) <br/><span style="font-style:italic">(20mg)</span>
</div>
<div style="height:85px; width:170px; text-align:right; font-size:13px; margin-right:5px">
Methamphetamine (Desoxyn, IR) <br/><span style="font-style:italic">(15mg)</span>
</div>
</div>
<div style="display:table-cell; overflow:hidden; max-width:800px">
<div id="medicine_table_container_2" class="medicine-table-container" style="position:relative; left:0">
<div style="white-space:nowrap; font-size:0px">
<div style="display:inline-block; background-color:yellow; width:130px; height:85px; border:1px solid #999; font-size: 12px; white-space:normal">
<div>
<div style="display:inline-block; width:70px; height:45px">
Morning<br/>-
</div>
<div style="display:inline-block; width:50px; height:45px">
Noon<br/>5mg
</div>
</div>
<div>
<div style="display:inline-block; width:70px; height:35px">
Afternoon<br/>12mg
</div>
<div style="display:inline-block; width:50px; height:35px">
Evening<br/>-
</div>
</div>
</div>
</div>
<div style="white-space:nowrap; font-size:0px">
<div style="display:inline-block; background-color:yellow; width:130px; height:85px; border:1px solid #999; font-size: 12px; white-space:normal">
<div>
<div style="display:inline-block; width:70px; height:45px">
Morning<br/>-
</div>
<div style="display:inline-block; width:50px; height:45px">
Noon<br/>5mg
</div>
</div>
<div>
<div style="display:inline-block; width:70px; height:35px">
Afternoon<br/>12mg
</div>
<div style="display:inline-block; width:50px; height:35px">
Evening<br/>-
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
最佳答案
这是关于垂直对齐的。默认设置为基线并生成此输出。只需将 table-cell
上的对齐方式更改为 top
,您就不会遇到此问题:
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell;
vertical-align: top;">
<div style="height:85px; width:170px; text-align:right; font-size:13px; margin-right:5px">
Dexedrine Spansules (Dextroamphetamine, ER) <br/><span style="font-style:italic">(20mg)</span>
</div>
<div style="height:85px; width:170px; text-align:right; font-size:13px; margin-right:5px">
Methamphetamine (Desoxyn, IR) <br/><span style="font-style:italic">(15mg)</span>
</div>
</div>
<div style="display:table-cell;
vertical-align: top; overflow:hidden; max-width:800px">
<div id="medicine_table_container_2" class="medicine-table-container" style="position:relative; left:0">
<div style="white-space:nowrap; font-size:0px">
<div style="display:inline-block; background-color:yellow; width:130px; height:85px; border:1px solid #999; font-size: 12px; white-space:normal">
<div>
<div style="display:inline-block; width:70px; height:45px">
Morning<br/>-
</div>
<div style="display:inline-block; width:50px; height:45px">
Noon<br/>5mg
</div>
</div>
<div>
<div style="display:inline-block; width:70px; height:35px">
Afternoon<br/>12mg
</div>
<div style="display:inline-block; width:50px; height:35px">
Evening<br/>-
</div>
</div>
</div>
</div>
<div style="white-space:nowrap; font-size:0px">
<div style="display:inline-block; background-color:yellow; width:130px; height:85px; border:1px solid #999; font-size: 12px; white-space:normal">
<div>
<div style="display:inline-block; width:70px; height:45px">
Morning<br/>-
</div>
<div style="display:inline-block; width:50px; height:45px">
Noon<br/>5mg
</div>
</div>
<div>
<div style="display:inline-block; width:70px; height:35px">
Afternoon<br/>12mg
</div>
<div style="display:inline-block; width:50px; height:35px">
Evening<br/>-
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
由于您的代码有点复杂,这里有一个重现问题并更好地理解发生了什么的基本代码:
.table {
display: table;
border: 1px solid;
margin: 5px;
}
.table>div {
display: table-row;
}
.table>div>span {
display: table-cell;
padding: 0 5px;
}
.table>div>span span {
display: inline-block;
}
baseline
<div class="table">
<div>
<span>one line</span>
<span><span>two <br> line (inline-block)</span></span>
</div>
</div>
baseline
<div class="table">
<div>
<span>two<br> line</span>
<span><span>two <br> line (inline-block)</span></span>
</div>
</div>
baseline (with overflow:hidden)
<div class="table">
<div>
<span>one line</span>
<span><span style="overflow:hidden;">two <br> line</span></span>
</div>
</div>
baseline (with overflow:hidden)
<div class="table">
<div>
<span>one line</span>
<span><span style="overflow:hidden;">another line</span></span>
</div>
</div>
top will fix all the cases
<div class="table">
<div>
<span style="vertical-align:top;">one line</span>
<span><span>two <br> line</span></span>
</div>
</div>
<div class="table">
<div>
<span style="vertical-align:top;">one line</span>
<span><span style="overflow:hidden;">two <br> line</span></span>
</div>
</div>
<div class="table">
<div>
<span style="vertical-align:top;">one line</span>
<span><span style="overflow:hidden;">another line</span></span>
</div>
</div>
<div class="table">
<div>
<span style="vertical-align:top;">two<br> line</span>
<span><span>two <br> line (inline-block)</span></span>
</div>
</div>
您可以清楚地看到 inline-block
(和 overflow:hidden
)的使用是这里的罪魁祸首,因为它使基线计数器的计算变得直观和意外.
关于html - :table-cell determined的padding是怎么显示的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56012432/