БЛОГ НА HUSL


CSS Взаимосвязаные
по ширине, возможно ли?

Автор вопроса: BlackStar1991

Есть вот такая всевдо таблица выполненная на <div> элементах

.se_list{
    position: relative;
    width: 100%;
    max-width: 600px;
    font-size: 20px;
}
.se_item{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 0;
    border: 1px solid #000;
    overflow-x: auto;
    text-align: center;
    height: auto;
}
.se_item:not(:first-child){
    border-top: 0;
}


.se_chunk{
    padding: 6px;
    text-align: center;
}
.se_chunk:not(:last-child){
    border-right: 1px solid #000;
}

.se_chunk__email{
    width: 200px;
    overflow-x: auto;
}

.se_btn{
    cursor: pointer;
}

.se_btn__download{
    position:fixed;
    padding: 15px 10px;
    top: 42px;
    right:10px;
    z-index: 9999;
}
<ul class="se_list">
  <li class="se_item">
    <div class="se_chunk se_chunk__id">1</div>
    <div class="se_chunk se_chunk__email">[email protected]</div>
    <div class="se_chunk se_chunk__ip">127.0.0.1</div>
    <div class="se_chunk se_chunk__time">2023-10-23 10:04:27</div>
  </li>
  <li class="se_item">
    <div class="se_chunk se_chunk__id">2</div>
    <div class="se_chunk se_chunk__email">[email protected]</div>
    <div class="se_chunk se_chunk__ip">127.0.0.1</div>
    <div class="se_chunk se_chunk__time">2023-10-23 10:44:45</div>
  </li>
  <li class="se_item">
    <div class="se_chunk se_chunk__id">3</div>
    <div class="se_chunk se_chunk__email">[email protected]</div>
    <div class="se_chunk se_chunk__ip">127.0.0.1</div>
    <div class="se_chunk se_chunk__time">2023-10-23 11:13:14</div>
  </li>
  <li class="se_item">
    <div class="se_chunk se_chunk__id">4</div>
    <div class="se_chunk se_chunk__email">[email protected]</div>
    <div class="se_chunk se_chunk__ip">127.0.0.1</div>
    <div class="se_chunk se_chunk__time">2023-10-23 12:27:50</div>
  </li>
  <li class="se_item">
    <div class="se_chunk se_chunk__id">5</div>
    <div class="se_chunk se_chunk__email">[email protected]</div>
    <div class="se_chunk se_chunk__ip">127.0.0.1</div>
    <div class="se_chunk se_chunk__time">2023-10-23 14:15:22</div>
  </li>
  <li class="se_item">
    <div class="se_chunk se_chunk__id">6</div>
    <div class="se_chunk se_chunk__email">[email protected]</div>
    <div class="se_chunk se_chunk__ip">127.0.0.1</div>
    <div class="se_chunk se_chunk__time">2023-10-23 14:48:35</div>
  </li>
</ul>

Вопрос, есть ли возможность сделать так, что б если в "ячейках" с классом se_chunk__email было очень длинное значение, то ВСЕ такие ячейки делались размера самого большого элемента ? По сути я ищу табличное поведение но для <div> элементов ?


Источник

Ответы (1 шт):

Автор решения: puffleeck

grid`ы в помощь

.se_list{
display: grid; /*!!!!!!!*/
grid-template-columns: repeat(3, 1fr);/*!!!!!!*/
    position: relative;
    width: 100%;
    max-width: 600px;
    font-size: 20px;
}
.se_item{
    position: relative;
    display: contents;/*!!!!!!!!!!
    flex-direction: row; !!!!!!!!!
    justify-content: flex-start; !!!!!!!!*/
    align-items: center;
    margin-bottom: 0;
    border: 1px solid #000;
    overflow-x: auto;
    text-align: center;
    height: auto;
}

.se_item > *:nth-child(3n+1){
    display: list-item;
    text-align: left;
}/*зачем отдельный контейнер под, ид когда у нас список?*/
.se_item > *{display: inline} /*!!!!*/
.se_item:not(:first-child){border-top: 0;}
.se_chunk:not(:last-child){border-right: 1px solid #000;}
.se_chunk{padding: 6px;} /* center есть в .se_item */
.se_btn{cursor: pointer;}

/*.se_chunk__email{
    width: 200px;
    overflow-x: auto;
}/* хз что с этим не так, но и нумерацию и верстку ломает */


.se_btn__download{
    position:fixed;
    padding: 15px 10px;
    top: 42px;
    right:10px;
    z-index: 9999;
}
<ol class="se_list">
  <li class="se_item">
    <div class="se_chunk se_chunk__email">[email protected]</div>
    <div class="se_chunk se_chunk__ip">127.0.0.1</div>
    <div class="se_chunk se_chunk__time">2023-10-23 10:04:27</div>
  </li>
  <li class="se_item">
    <div class="se_chunk se_chunk__email">[email protected]</div>
    <div class="se_chunk se_chunk__ip">127.0.0.1</div>
    <div class="se_chunk se_chunk__time">2023-10-23 10:44:45</div>
  </li>
  <li class="se_item">
    <div class="se_chunk se_chunk__email">[email protected]</div>
    <div class="se_chunk se_chunk__ip">127.0.0.1</div>
    <div class="se_chunk se_chunk__time">2023-10-23 11:13:14</div>
  </li>
  <li class="se_item">
    <div class="se_chunk se_chunk__email">[email protected]</div>
    <div class="se_chunk se_chunk__ip">127.0.0.1</div>
    <div class="se_chunk se_chunk__time">2023-10-23 12:27:50</div>
  </li>
  <li class="se_item">
    <div class="se_chunk se_chunk__email">[email protected]</div>
    <div class="se_chunk se_chunk__ip">127.0.0.1</div>
    <div class="se_chunk se_chunk__time">2023-10-23 14:15:22</div>
  </li>
  <li class="se_item">
    <div class="se_chunk se_chunk__email">[email protected]</div>
    <div class="se_chunk se_chunk__ip">127.0.0.1</div>
    <div class="se_chunk se_chunk__time">2023-10-23 14:48:35</div>
  </li>
</ol>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.