主页 / 问题 / 1547613
Accepted
BlackStar1991
Asked:2023-10-24 14:58:58 +0000 UTC2023-10-24 14:58:58 +0000 UTC

CSS按宽度互连<div>，可能吗？

  • 772

有这样一个完全由<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>元素？

html

1 个回答

  1. Best Answer

    网格可以提供帮助

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

    • 1

相关问题