這裏是我的代碼:如何分解小屏幕上的表格單元格?
.wrapper {
border: 1px solid red;
padding-left: 20px;
}
.table {
display: table;
width: 100%;
}
.table > div {
display: table-cell;
border: 1px solid green;
min-width: 190px;
}
<div class="wrapper">
<div class="table">
<div class="share_edit_flag">
<span>share</span>
<span>edit</span>
<span>close</span>
</div>
<div class="editor">
<a href="#">edited May 21 16 at 11:58</a>
<div class="profile">
<img src="#" />
<a href="#">Rory O'Kane</a>
<b>12.6k</b>
<!-- I don't have any badge in my website -->
</div>
</div>
<div class="author">
<a href="#">asked May 21 16 at 11:51</a>
<div class="profile">
<img src="#" />
<a href="#">vasanthkumarmani</a>
<b>1</b>
<!-- I don't have any badge in my website -->
</div>
</div>
</div>
</div>
請調整頁面大小。正如你所看到的,綠色的盒子在小屏幕上出現在紅色框中。
無論如何,當父寬度小於子元素寬度時,我想將div.author
和div.editor
分解到一起。這樣做有可能嗎?
嘗試與引導? – MKAD
@MKAD不,我不使用引導 –
好吧,那麼你必須使用@media查詢看看例子從Teshtek – MKAD