如何使所有 div 框高度相同

Question

我正在嘗試使 LightPink 和 LightBlue 中的所有 DIV 框具有相同的高度。

目前這些框有不同的高度，還要注意 LightBlue 框可以垂直滾動：

 .sample_3 { margin: 5px; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 20px; } .sample_3 .column > div { padding: 5px 20px; border: 1px blue solid; } .sample_3 .box__second { display: -webkit-box; display: -ms-flexbox; display: flex; overflow-x: scroll; width: 300px; } .sample_3 .box__first > .column > div { background-color: lightpink; } .sample_3 .box__second > .column > div { background-color: lightblue; width: 100%; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="sample_3"> <div class="box__first"> <div class="column"> <div>Box 1 231232 sds sad s</div> <div>Box 2</div> <div>Box 3</div> </div> </div> <div class="box__second"> <div class="column second"> <div>Random Text</div> <div>Random Text MORE MORE MORE</div> <div>Random Text</div> </div> <div class="column"> <div>Random Text</div> <div>Random Text</div> <div>Random Text</div> </div> <div class="column"> <div>Random Text</div> <div>Text</div> <div>Random Text</div> </div> <div class="column"> <div>Random Text</div> <div>Random Text</div> <div>Random Text</div> </div> </div> </div>

我在這里通過 Flex 完成了此操作，但這是使用不同的 HTML 結構，這對我來說並不理想，但這可以很好地說明我正在嘗試使用sample_3實現的sample_3

 .sample_4 .wrap { width: 100%; margin: 15px; } .sample_4 .column { background-color: lightskyblue; border: 1px solid blue; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .sample_4 .column div { padding: 5px; } .sample_4 .row > .column:not(:first-child) { background-color: #ffbb00; overflow-x: scroll; width: 400px; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="sample_4"> <div class="wrap"> <div class="row"> <div class="column"> <div>Box 1 MORE MORE</div> </div> <div class="column"> <div>Random Text</div> </div> <div class="column"> <div>Random Text</div> </div> <div class="column"> <div>Random Text</div> </div> <div class="column"> <div>Random</div> </div> </div> <div class="row"> <div class="column"> <div>Box 2</div> </div> <div class="column"> <div>Random Text Text MORE MORE MORE</div> </div> <div class="column"> <div>Random Text</div> </div> <div class="column"> <div>Random Text</div> </div> <div class="column"> <div>Random Text</div> </div> </div> </div> </div>

所以最終目標是讓sample_3所有框都具有相同的高度，並且它們可以根據同一行其他框的內容動態改變高度。

Answer 1

應該試試這種方式

             <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

             <style type="text/css">
               .table-responsive{
               max-width: 200px;
             }
             </style>
             <table class="table table-hover">

             <tbody>
              <tr>
                   <th scope="row">Box 1</th>
                   <td class="table-responsive">Random Text </td>
                   <td>Random Text</td>
                   <td>Random Text</td>
  
              </tr>
              <tr>
              <th scope="row">Box 2</th>
              <td class="table-responsive">RAndom Text RAndom Text RAndom Text RAndom TextRAndom TextRAndom text RAndom Textv RAndom Text RAndom Text RAndom Text RAndom Textvv RAndom Text</td>
               <td >RAndom Text</td>
               <td>RAndom Text</td>
             </tr>
             <tr>
              <th scope="row">Box 3</th>
              <td  >Random Text</td>
              <td class="table-responsive">Random Text Random TextRandom Textvv Random Textvv Random Text vvRandom TextRandom TextRandom TextRandom Text</td>
                    <td>A</td>
                  </tr>
                </tbody>
              </table>

這可能會有所幫助

Answer 2

這是我能想到的最接近的解決方案，這個解決方案的關鍵是使用粘性，因為固定盒裝不均勻。

粘性的問題在於，在移動視圖中滾動時，只有粘性元素會輕微移動：視頻示例 > https://streamable.com/jhz2vr

 .sample__two { overflow-x: scroll; border-left: 1px solid red; } .sample__two th { min-width: 120px; } .sample__two th, .sample__two td { padding: 5px 10px; width: 100px; border: 1px solid red; border-collapse: collapse; } .sample__two .freeze { position: -webkit-sticky; position: sticky; left: 0; background-color: white; border-left: 0px solid red; } .sample__two .hide { border: unset; } .sample__two thead { background-color: #93eccf; } .sample__two tbody { background-color: #aedb31; } .sample__two .test { background-color: #0026ff !important; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="sample__two"> <table> <thead> <tr> <th class="freeze">Empty</th> <th class="">Empty</th> <th>Ratings</th> <th>Header 4</th> <th>Header 5</th> <th>Header 6</th> <th>Header 7</th> <th>Header 8</th> <th>Header 9</th> </tr> </thead> <tbody> <tr> <td class="freeze">Price 1</td> <td>Content 1</td> <td>Content 1 TEST</td> <td>Content 1</td> <td>Content 1</td> <td>Content 1</td> <td>Content 1</td> <td>Content 1</td> <td>Content 1</td> </tr> <tr> <td class="freeze">Price 2</td> <td>Content 2</td> <td>Content 2</td> <td>Content 2</td> <td>Content 2</td> <td>Content 2</td> <td>Content 2</td> <td>Content 2</td> <td>Content 2</td> </tr> </tbody> </table> </div>

如果有人有更好的方法，我不介意

Answer 3

 .sample_3 { margin: 5px; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 20px; } .sample_3 .column { display: flex; height: 200px; } .sample_3 .box__first .column { flex-direction: column; } .sample_3 .box__first .column div { height: 200px; } .sample_3 .column > div { padding: 5px 20px; border: 1px blue solid; } .sample_3 .box__second { display: -webkit-box; display: -ms-flexbox; display: flex; overflow-x: scroll; width: 300px; } .sample_3 .box__first > .column > div { background-color: lightpink; } .sample_3 .box__second > .column > div { background-color: lightblue; width: 100%; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="sample_3"> <div class="box__first"> <div class="column"> <div>Box 1 231232 sds sad s</div> <div>Box 2</div> <div>Box 3</div> </div> </div> <div class="box__second"> <div class="column second"> <div>Random Text</div> <div>Random Text MORE MORE MORE</div> <div>Random Text</div> </div> <div class="column"> <div>Random Text</div> <div>Random Text</div> <div>Random Text</div> </div> <div class="column"> <div>Random Text</div> <div>Text</div> <div>Random Text</div> </div> <div class="column"> <div>Random Text</div> <div>Random Text</div> <div>Random Text</div> </div> </div> </div>

Answer 4

 .sample__two { overflow-x: scroll; border-left: 1px solid red; } .sample__two th { min-width: 120px; } .sample__two th, .sample__two td { padding: 5px 10px; width: 100px; border: 1px solid red; border-collapse: collapse; } .sample__two .freeze { position: -webkit-sticky; position: sticky; left: 0; background-color: white; border-left: 0px solid red; } .sample__two .hide { border: unset; } .sample__two thead { background-color: #93eccf; } .sample__two tbody { background-color: #aedb31; } .sample__two .test { background-color: #0026ff !important; } .sample__two td{ height: 100px;}

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="sample__two"> <table> <thead> <tr> <th class="freeze">Empty</th> <th class="">Empty</th> <th>Ratings</th> <th>Header 4</th> <th>Header 5</th> <th>Header 6</th> <th>Header 7</th> <th>Header 8</th> <th>Header 9</th> </tr> </thead> <tbody> <tr> <td class="freeze">Price 1</td> <td>Content 1</td> <td>Content 1 TEST</td> <td>Content 1</td> <td>Content 1</td> <td>Content 1</td> <td>Content 1</td> <td>Content 1</td> <td>Content 1</td> </tr> <tr> <td class="freeze">Price 2</td> <td>Content 2</td> <td>Content 2</td> <td>Content 2</td> <td>Content 2</td> <td>Content 2</td> <td>Content 2</td> <td>Content 2</td> <td>Content 2</td> </tr> </tbody> </table> </div>