如何分解小屏幕上的表格单元格？

Question

这里是我的代码：

.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分解到一起。这样做有可能吗？

Answer 1

可以使用display: flex而不是display: table。

要将编辑器和作者div合并在一起，您可以使用下面的脚本。即使您将表格放入限制宽度的div中，它也会工作。

JSFiddle

$(window).resize(function() { 
 
    setTableDirection(); 
 
}); 
 

 
setTableDirection(); 
 

 
function setTableDirection() { 
 
    var $table = $('.table'); 
 

 
    if ($table.width() <= 580) { 
 
    $table.css('flex-direction', 'column'); 
 
    } else { 
 
    $table.css('flex-direction', 'row'); 
 
    } 
 
}

.wrapper { 
 
    border: 1px solid red; 
 
    padding-left: 20px; 
 
} 
 

 
.table { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.table>div { 
 
    border: 1px solid green; 
 
    min-width: 190px; 
 
    flex-grow: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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>

Answer 2

这是怎么回事？

.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; 
 
} 
 

 
@media screen and (max-width: 480px) { 
 
    .table > div { 
 
    display: table-cell; 
 
    border: 1px solid green; 
 
    min-width: 190px; 
 
    float:left; 
 
} 
 
    .table > div:nth-child(1){ 
 
    clear: both; 
 
    } 
 
}

<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的第n个孩子，我认为它去480像素下溢出。我认为你更好地使用显示器柔性或自举网格系统。对于埃夫里的问题，我希望这儿过得您理解，也对不起我的英文:)

在这里，您可以调整，看到了差距小提琴：here