gpt4 book ai didi

CSS 显示 :table-cell with div inside table

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

如果带有 table-row 样式的 div 在表格单元格内,如何使 display:table-cell 样式起作用(或外观相似的替代方案)? (见链接)

http://jsfiddle.net/ELKQg/460/

我希望 container1 div 的行为类似于 container2。

代码:(如果链接变得不可访问)

html:

<div id="container1" class="container">
<table>
<tr>
<td>
<div class="row">
<div class="cell">aaaa</div>
<div class="cell expand">b</div>
<div class="cell">c</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="row">
<div class="cell">d</div>
<div class="cell expand">eeeee</div>
<div class="cell">f</div>
</div>
</td>
</tr>
</table>
</div>

<div id="container2" class="container">
<div class="row">
<div class="cell">aaaa</div>
<div class="cell expand">b</div>
<div class="cell">c</div>
</div>
<div class="row">
<div class="cell">d</div>
<div class="cell expand">eeeee</div>
<div class="cell">f</div>
</div>
</div>

CSS:

.container{width: 500px;overflow:hidden; /* instead of clearfix div */}  
div { border:1px solid;padding: 1px;}
.row {display:table-row;}
.cell {display:table-cell;}
.expand{overflow:hidden;width:100%;}

最佳答案

  1. 额外的<table>包含你的 <div>.container1需要有 width: 100%
  2. display: table-cell元素不一定需要包含 display: table-row只要 parent 是display: table .设置 .row到那个(理想情况下你会重新命名它,因为规则不再有意义)

修复并 fork 了您的演示: http://jsfiddle.net/barney/ahMg8/

关于CSS 显示 :table-cell with div inside table,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15133803/

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