<tr>
<th>备份文件</th>
<th>备份时间</th>
<th>大小</th>
<th width="10%">操作</th>
</tr>
其他3个th 会自动宽度
<div class="data-header">
<div class="column">备份文件</div>
<div class="column">备份时间</div>
<div class="column">大小</div>
<div class="column">操作</div>
</div>
怎么让 column 自动宽度 不要用 flex
首先回答问题,能。
然后要提到的一点是,按照你这个内容,应该是用table
标签来写HTML结构才对,为什么要用div
标签呢?数据表型的结构肯定是用表格来操作啊。
最后说明一下,因为你提到不能用flex
,那么能实现的方式就是display:table
。所以,HTML的结构要改一下,并且兼容性也不好。
加个样式就行:
<style type="text/css">
div.data-header div.column {display: inline-block;}
</style>
不要过度迷恋div,table不是一无是处
css
.table, .table-list { display: table; } .table>*, .table-list>* { display: table-cell; } /* 响应式时候可以改变 */ @media(max-width: 320px){ .table, .table-list, .table>*, .table-list>* { display: block; } }
http://www.w3school.com.cn/cssref/pr_class_display.asp
Bootstrap grid system
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>