Как я могу разбивать ячейки таблицы на маленьких экранах?

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 с ограниченной шириной.

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, я предположил, что это пойти перелива под 480px. Я думаю, вам лучше использовать экранную гибкую или загрузочную сетку. Для Эври вопрос я нахожусь here.I надеюсь, что вы понимаете, а также простите за мой английский :)

Здесь скрипку вы можете изменить размер и увидеть разницу: here