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

Я хочу четыре квадранта на равных размерах на моей странице - все должно быть одинаковой ширины и высоты, с некоторым пространством между ними.Как я могу получить квадранты на моей странице, чтобы они были вертикально растянуты, чтобы соответствовать высоте их горизонтального соседа?

Что я получаю как сейчас это:

То, что я хочу, чтобы верхний правый квадрант («Ценообразование Исключения») растянуть по вертикали, как будто тянет ко дну, так что его нижняя граница выравнивается горизонтально с верхним левым («Top 10 Items Purchased») квадрантом.

Я хочу аналогичный для двух нижних квадрантов, а именно, чтобы квадрант «Прогнозируемый расход» был «снесен» или «растянут», чтобы он выравнивал горизонтально с более высоким квадрантом «Уровень заполнения».

Как это сделать?

Мой код (это макет - все HTML и CSS объединены в один файле .html) выглядят следующим образом:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>eServices Customer Dashboard</title> 
<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 

<!-- jQuery library --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

<!-- Latest compiled JavaScript --> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <!--[if IE]> 
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 

<!-- Inline CSS (don't tell the CSS-Whisperers I did this!) --> 
<style> 
* { 
    padding: 0; 
    margin: 0; 
    box-sizing: border-box; 
} 
body { 
    background-color: white; 
} 
label { 
    font-family: Candara, Calibri, Cambria, Georgia, serif; 
} 
.body-content { 
    -webkit-box-shadow: -1px 0 5px 0 #000000; 
    -webkit-box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .25); 
    box-shadow: -1px 0 5px 0 #000000; 
    box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .5); 
    padding-left: 1px; 
    padding-right: 1px; 
    padding-bottom: 15px; 
} 
.jumbotronjr { 
    padding: 12px; 
    margin-bottom: -16px; 
    font-size: 21px; 
    font-weight: 200; 
    color: inherit; 
    background-color: white; 
} 
.addltopmargin { 
    margin-top: 8px; 
} 
.sectiontext { 
    font-size: 1.5em; 
    font-weight: bold; 
    font-family: Candara, Calibri, Cambria, serif; 
    color: green; 
    margin-top: -4px;  
} 
.bottommarginbreathingroom { 
    margin-bottom: 4px; 
} 
.marginaboveandbelow { 
    margin-top: 15px; 
    margin-bottom: 15px; 
} 
.rightjustifytext { 
    text-align: right; 
} 
table { 
    font-family: georgias, sans-serif; 
    border-collapse: collapse; 
    width: 100%; 
} 

td, th { 
    border: 1px solid #dddddd; 
    text-align: left; 
    padding: 8px; 
} 

tr:nth-child(even) { 
    background-color: #dddddd; 
} 
.contents{ 
    height:50%; 
    width:100%; 
} 
.redfont { 
    color: red; 
} 
.bold { 
    font-weight: bold; 
} 
.container { 
    width: 100vw; 
    height: 100vh; 
    display: flex; 
    flex-wrap: wrap; 
} 
.container div { 
    display: inline-block; 
    width: 50vw; 
    height: 50vh; 
    overflow-y: scroll; 
} 
.topleft { 
    margin-top: 16px; 
    margin-left: 16px; 
    margin-bottom: 16px; 
    padding: 16px; 
    border:1px solid black; 
} 
.topright { 
    margin-top: 16px; 
    margin-right: 16px; 
    margin-bottom: 16px; 
    margin-left: -12px; 
    padding: 16px; 
    border:1px solid black; 
} 
.bottomleft { 
    margin-left: 16px; 
    padding: 16px; 
    border:1px solid black; 
} 
.bottomright { 
    margin-right: 16px; 
    margin-left: -12px; 
    padding: 16px; 
    border:1px solid black; 
} 
</style> 
</head> 

<body> 

<div class="contents"> 
<div class="row"> 
<div class="col-md-6"> 
<div class="topleft"> 
<h2 class="sectiontext">Top 10 Items Purchased</h2> 
     <div> 
      <input type="date" class="bottommarginbreathingroom" id="daterangefrom2" name="daterangefrom2"> 
      </input> 
      <label> to </label> 
      <input type="date" class="bottommarginbreathingroom" id="daterangeto2" name="daterangeto2"> 
      </input> 
     </div> 

     <table> 
      <tr> 
       <th>Item Code</th> 
       <th>Description</th> 
       <th>Qty</th> 
      </tr> 
      <tr> 
       <td>100250</td> 
       <td>Artichokes Green Globe 18 Size</td> 
       <td>9084</td> 
      </tr> 
      <tr> 
       <td>102800</td> 
       <td>Broccoli Bunched 18 Size</td> 
       <td>8837</td> 
      </tr> 
      <tr> 
       <td>100050</td> 
       <td>Anise Fennell 12</td> 
       <td>6653</td> 
      </tr> 
      <tr> 
       <td>101600</td> 
       <td>Beans Blue Lake Round Hand Pick</td> 
       <td>5846</td> 
      </tr> 
      <tr> 
       <td>106000</td> 
       <td>Carrots Cello 48/1#</td> 
       <td>4266</td> 
      </tr> 
      <tr> 
       <td>108000</td> 
       <td>Celery Pascal 12</td> 
       <td>3774</td> 
      </tr> 
      <tr> 
       <td>105000</td> 
       <td>Cabbage Green 45-50#</td> 
       <td>3024</td> 
      </tr> 
      <tr> 
       <td>104000</td> 
       <td>Brussel Sprouts Cello Cups 12/12 oz</td> 
       <td>2663</td> 
      </tr> 
      <tr> 
       <td>100450</td> 
       <td>Asparagus Colossal 11/1#</td> 
       <td>2624</td> 
      </tr> 
      <tr> 
       <td>102350</td> 
       <td>Beets With Tops 24</td> 
       <td>2253</td> 
      </tr> 
     </table> 
</div> 
</div> 

<div class="col-md-6"> 
<div class="topright"> 
<h2 class="sectiontext">Pricing Exceptions - Weekly Recap</h2> 
<label class="redfont">Red denotes Contract Item Overages</label> 
</br> 
<label>For Weyand on the pricing week of - 7/31/2016</label> 
     <table> 
      <tr> 
       <th>Item Code</th> 
       <th>Description</th> 
       <th>Bid Price</th> 
       <th>Sell Price</th> 
       <th>Qty</th> 
      </tr> 
      <tr> 
       <td>231083</td> 
       <td>BERRIES, BLACK DRISC 1/6 OZ</td> 
       <td>0.00</td> 
       <td>4.35</td> 
       <td>1.00</td> 
      </tr> 
      <tr> 
       <td>104150</td> 
       <td>BRUSSEL SPROUTS, 25#</td> 
       <td>0.00</td> 
       <td>36.20</td> 
       <td>1.00</td> 
      </tr> 
      <tr> 
       <td>261650</td> 
       <td>LIMES, 200 CT 40#</td> 
       <td>0.00</td> 
       <td>18.65</td> 
       <td>2.00</td> 
      </tr> 
      <tr> 
       <td>140000</td> 
       <td>MUSHROOMS, BUTTON 10#</td> 
       <td>0.00</td> 
       <td>19.95</td> 
       <td>2.00</td> 
      </tr> 
      <tr> 
       <td>398980</td> 
       <td>MELONS, CANTALOUPE CHUNKS 2/5#</td> 
       <td>38.30</td> 
       <td>35.00</td> 
       <td>10.00</td> 
      </tr> 
      <tr> 
       <td>398280</td> 
       <td>MELONS, HONEYDEW CHUNKS 2/5#</td> 
       <td>37.30</td> 
       <td>34.50</td> 
       <td>15.00</td> 
      </tr> 
      <tr> 
       <td>398036</td> 
       <td>PINEAPPLE, CHUNKS 2/5#</td> 
       <td>37.70</td> 
       <td>35.00</td> 
       <td>10.00</td> 
      </tr> 
      <tr> 
       <td>351135</td> 
       <td>LETTUCE, SALAD 3-WAY SEP BAG 1/5#</td> 
       <td>6.46</td> 
       <td>6.01</td> 
       <td>2.00</td> 
      </tr> 
      <tr> 
       <td>208110</td> 
       <td>APPLES, GALA 12 CT</td> 
       <td>0.00</td> 
       <td>8.04</td> 
       <td>1.00</td> 
      </tr> 
     </table> 
    </div> 
</div> 
</div> 

<div class="row"> 
<div class="col-md-6"> 
<div class="bottomleft"> 
<h2 class="sectiontext">Forecasted Spend</h2> 
     <table> 
      <tr> 
       <th>Item Code</th> 
       <th>Last Week's Usage</th> 
       <th>This Week's Price</th> 
       <th>Forecasted Spend</th> 
      </tr> 

      <tr> 
       <td>261650</td> 
       <td>49</td> 
       <td>3.14</td> 
       <td>153.86</td> 
      </tr> 
      <tr> 
       <td>231083</td> 
       <td>52</td> 
       <td>1.25</td> 
       <td>65.00</td> 
      </tr> 
      <tr> 
       <td>398980</td> 
       <td>46</td> 
       <td>4.95</td> 
       <td>227.70</td> 
      </tr> 
      <tr> 
       <td>351135</td> 
       <td>40</td> 
       <td>0.75</td> 
       <td>30.00</td> 
      </tr> 
      <tr> 
       <td>398036</td> 
       <td>42</td> 
       <td>3.00</td> 
       <td>126.00</td> 
      </tr> 
      <tr> 
       <td>208110</td> 
       <td>42</td> 
       <td>2.50</td> 
       <td>105.00</td> 
      </tr> 
      <tr> 
       <td class="bold">TOTAL</td> 
       <td class="bold">271</td> 
       <td class="bold">--</td> 
       <td class="bold">$707.56</td> 
      </tr> 
     </table> 
    </div> 
    </div> 

<div class="col-md-6"> 
<div class="bottomright"> 
<h2 class="sectiontext">Fill Rate</h2> 
     <table> 
      <tr> 
       <th>Company Name</th> 
       <th>Reason Description</th> 
       <th>Ordered</th> 
       <th>Shipped</th> 
       <th>Rate %</th> 
      </tr> 

      <tr> 
       <td>ABUELOS #A11 - PEORIA</td> 
       <td>Regular Item, no issues</td> 
       <td>622</td> 
       <td>622</td> 
       <td>100</td> 
      </tr> 
      <tr> 
       <td>ABUELOS #A09 - EAST PLANO</td> 
       <td>Regular Item, no issues</td> 
       <td>371</td> 
       <td>375</td> 
       <td>101</td> 
      </tr> 
      <tr> 
       <td>ABUELOS #A26 - MYRTLE BEACH</td> 
       <td>Credit - Product Quality (for credit adjustments only)</td> 
       <td>19</td> 
       <td>9</td> 
       <td>47</td> 
      </tr> 
      <tr> 
       <td>ABUELOS #A38 - LAKELAND</td> 
       <td>Regular Item, no issues</td> 
       <td>569</td> 
       <td>569</td> 
       <td>100</td> 
      </tr> 
      <tr> 
       <td class="bold">TOTAL</td> 
       <td></td> 
       <td class="bold">1581</td> 
       <td class="bold">1575</td> 
       <td class="bold">99.6</td> 
      </tr> 
     </table> 
    </div> 
</div> 
</div> 

</div> 
</body> 
</html>

источник

2016-08-10 B. Clay Shannon

Вы можете искать сгибают равных колонок по высоте: http://stackoverflow.com/a/33815389/3597276 –

Я бы посоветовал Flex, поскольку он не поддерживается IE ... http://caniuse.com/#search=flex – JPeG

Я попробовал, добавив «display: flex;» к содержимому класса css, и результат был позорным - страница выглядела как теневые интриганы после того, как их бросили в яму льва после того, как Даниэля благополучно вытащили оттуда - ИЮНЬ, все прерваны. –

Если вы не создаете контейнеры динамических размеров, то вы можете установить высота как таковая:

.topright, .topleft { 
height: 400px; 
}

Это будет держать их даже.

источник

2016-08-10 21:14:01 JPeG

Мне пришлось изменить размер, конечно, а также добавить пару для дна, но в основном это делает. –

Принял меня много времени, и я получил это:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>eServices Customer Dashboard</title> 
<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 

<!-- jQuery library --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

<!-- Latest compiled JavaScript --> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <!--[if IE]> 
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 

<!-- Inline CSS (don't tell the CSS-Whisperers I did this!) --> 
<style> 
* { 
    padding: 0; 
    margin: 0; 
    box-sizing: border-box; 
} 
body { 
    background-color: white; 
} 
label { 
    font-family: Candara, Calibri, Cambria, Georgia, serif; 
} 
.body-content { 
    -webkit-box-shadow: -1px 0 5px 0 #000000; 
    -webkit-box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .25); 
    box-shadow: -1px 0 5px 0 #000000; 
    box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .5); 
    padding-left: 1px; 
    padding-right: 1px; 
    padding-bottom: 15px; 
} 
.jumbotronjr { 
    padding: 12px; 
    margin-bottom: -16px; 
    font-size: 21px; 
    font-weight: 200; 
    color: inherit; 
    background-color: white; 
} 
.addltopmargin { 
    margin-top: 8px; 
} 
.sectiontext { 
    font-size: 1.5em; 
    font-weight: bold; 
    font-family: Candara, Calibri, Cambria, serif; 
    color: green; 
    margin-top: -4px;  
} 
.bottommarginbreathingroom { 
    margin-bottom: 4px; 
} 
.marginaboveandbelow { 
    margin-top: 15px; 
    margin-bottom: 15px; 
} 
.rightjustifytext { 
    text-align: right; 
} 
table { 
    font-family: georgias, sans-serif; 
    border-collapse: collapse; 
    width: 100%; 
    align:center; 
} 

td, th { 
    border: 1px solid #dddddd; 
    text-align: left; 
    padding: 8px; 
} 

tr:nth-child(even) { 
    background-color: #dddddd; 
} 
.contents{ 
    height:50%; 
    width:100%; 
} 
.redfont { 
    color: red; 
} 
.bold { 
    font-weight: bold; 
} 
.container { 
    width: 100vw; 
    height: 100vh; 
    display: flex; 
    flex-wrap: wrap; 
} 
.container div { 
    display: inline-block; 
    width: 50vw; 
    height: 50vh; 
    overflow-y: scroll; 
} 
.topleft { 
    margin-top: 16px; 
    margin-left: 16px; 
    margin-bottom: 16px; 
    margin-right:19px; 
    padding-top: 16px; 
    padding-bottom:16px; 
    border:1px solid black; 
    height:500px; 

} 
.topright { 
    margin-top: 16px; 
    margin-right: 16px; 
    margin-left: 15px; 

    padding-top: 16px; 
    padding-bottom:16px; 
    height:500px; 

    border:1px solid black; 
} 
.bottomleft { 
    margin-left: 16px; 
    margin-top:30px; 
    margin-right:18px; 
    padding-top: 16px; 
    padding-bottom:16px; 
    border:1px solid black; 
    height:385px; 
} 
.bottomright { 
    margin-right: 16px; 
    margin-top:30px; 
    margin-left:15px; 




    padding-top: 16px; 
    padding-bottom:16px; 
    border:1px solid black; 
    height:385px; 
} 
#xyz{ 


} 
</style> 
</head> 

<body> 

<div class="contents"> 
<div class="row"> 
<div class="col-md-6 col-sm-12 "> 
<div class="topleft"> 
<h2 class="sectiontext">Top 10 Items Purchased</h2> 
     <div> 
      <input type="date" class="bottommarginbreathingroom" id="daterangefrom2" name="daterangefrom2"> 
      </input> 
      <label> to </label> 
      <input type="date" class="bottommarginbreathingroom" id="daterangeto2" name="daterangeto2"> 
      </input> 
     </div> 

     <table> 
      <tr> 
       <th>Item Code</th> 
       <th>Description</th> 
       <th>Qty</th> 
      </tr> 
      <tr> 
       <td>100250</td> 
       <td>Artichokes Green Globe 18 Size</td> 
       <td>9084</td> 
      </tr> 
      <tr> 
       <td>102800</td> 
       <td>Broccoli Bunched 18 Size</td> 
       <td>8837</td> 
      </tr> 
      <tr> 
       <td>100050</td> 
       <td>Anise Fennell 12</td> 
       <td>6653</td> 
      </tr> 
      <tr> 
       <td>101600</td> 
       <td>Beans Blue Lake Round Hand Pick</td> 
       <td>5846</td> 
      </tr> 
      <tr> 
       <td>106000</td> 
       <td>Carrots Cello 48/1#</td> 
       <td>4266</td> 
      </tr> 
      <tr> 
       <td>108000</td> 
       <td>Celery Pascal 12</td> 
       <td>3774</td> 
      </tr> 
      <tr> 
       <td>105000</td> 
       <td>Cabbage Green 45-50#</td> 
       <td>3024</td> 
      </tr> 
      <tr> 
       <td>104000</td> 
       <td>Brussel Sprouts Cello Cups 12/12 oz</td> 
       <td>2663</td> 
      </tr> 
      <tr> 
       <td>100450</td> 
       <td>Asparagus Colossal 11/1#</td> 
       <td>2624</td> 
      </tr> 
      <tr> 
       <td>102350</td> 
       <td>Beets With Tops 24</td> 
       <td>2253</td> 
      </tr> 
     </table> 
</div> 
</div> 

<div class="col-md-6 col-sm-12"> 
<div class="topright"> 

<h2 class="sectiontext">Pricing Exceptions - Weekly Recap</h2> 
<label class="redfont">Red denotes Contract Item Overages</label> 
</br> 
<label>For Weyand on the pricing week of - 7/31/2016</label> 
     <table> 
      <tr> 
       <th>Item Code</th> 
       <th>Description</th> 
       <th>Bid Price</th> 
       <th>Sell Price</th> 
       <th>Qty</th> 
      </tr> 
      <tr> 
       <td>231083</td> 
       <td>BERRIES, BLACK DRISC 1/6 OZ</td> 
       <td>0.00</td> 
       <td>4.35</td> 
       <td>1.00</td> 
      </tr> 
      <tr> 
       <td>104150</td> 
       <td>BRUSSEL SPROUTS, 25#</td> 
       <td>0.00</td> 
       <td>36.20</td> 
       <td>1.00</td> 
      </tr> 
      <tr> 
       <td>261650</td> 
       <td>LIMES, 200 CT 40#</td> 
       <td>0.00</td> 
       <td>18.65</td> 
       <td>2.00</td> 
      </tr> 
      <tr> 
       <td>140000</td> 
       <td>MUSHROOMS, BUTTON 10#</td> 
       <td>0.00</td> 
       <td>19.95</td> 
       <td>2.00</td> 
      </tr> 
      <tr> 
       <td>398980</td> 
       <td>MELONS, CANTALOUPE CHUNKS 2/5#</td> 
       <td>38.30</td> 
       <td>35.00</td> 
       <td>10.00</td> 
      </tr> 
      <tr> 
       <td>398280</td> 
       <td>MELONS, HONEYDEW CHUNKS 2/5#</td> 
       <td>37.30</td> 
       <td>34.50</td> 
       <td>15.00</td> 
      </tr> 
      <tr> 
       <td>398036</td> 
       <td>PINEAPPLE, CHUNKS 2/5#</td> 
       <td>37.70</td> 
       <td>35.00</td> 
       <td>10.00</td> 
      </tr> 
      <tr> 
       <td>351135</td> 
       <td>LETTUCE, SALAD 3-WAY SEP BAG 1/5#</td> 
       <td>6.46</td> 
       <td>6.01</td> 
       <td>2.00</td> 
      </tr> 
      <tr> 
       <td>208110</td> 
       <td>APPLES, GALA 12 CT</td> 
       <td>0.00</td> 
       <td>8.04</td> 
       <td>1.00</td> 
      </tr> 
     </table> 
    </div> 
</div> 
<div class="col-md-6 col-sm-12"><br/></div> 
<div class="col-md-6 col-sm-12"><br/></div> 
</div> 

<div class="row"> 
<div class="col-md-6 col-sm-12" > 
<div class="bottomleft" > 
<h2 class="sectiontext">Forecasted Spend</h2> 
     <table> 
      <tr> 
       <th>Item Code</th> 
       <th>Last Week's Usage</th> 
       <th>This Week's Price</th> 
       <th>Forecasted Spend</th> 
      </tr> 

      <tr> 
       <td>261650</td> 
       <td>49</td> 
       <td>3.14</td> 
       <td>153.86</td> 
      </tr> 
      <tr> 
       <td>231083</td> 
       <td>52</td> 
       <td>1.25</td> 
       <td>65.00</td> 
      </tr> 
      <tr> 
       <td>398980</td> 
       <td>46</td> 
       <td>4.95</td> 
       <td>227.70</td> 
      </tr> 
      <tr> 
       <td>351135</td> 
       <td>40</td> 
       <td>0.75</td> 
       <td>30.00</td> 
      </tr> 
      <tr> 
       <td>398036</td> 
       <td>42</td> 
       <td>3.00</td> 
       <td>126.00</td> 
      </tr> 
      <tr> 
       <td>208110</td> 
       <td>42</td> 
       <td>2.50</td> 
       <td>105.00</td> 
      </tr> 
      <tr> 
       <td class="bold">TOTAL</td> 
       <td class="bold">271</td> 
       <td class="bold">--</td> 
       <td class="bold">$707.56</td> 



      </tr> 




     </table > 
    </div> 
    </div> 

<div class="col-md-6 col-sm-12"> 
<div class="bottomright"> 
<h2 class="sectiontext">Fill Rate</h2> 
     <table> 
      <tr> 
       <th>Company Name</th> 
       <th>Reason Description</th> 
       <th>Ordered</th> 
       <th>Shipped</th> 
       <th>Rate %</th> 
      </tr> 

      <tr> 
       <td>ABUELOS #A11 - PEORIA</td> 
       <td>Regular Item, no issues</td> 
       <td>622</td> 
       <td>622</td> 
       <td>100</td> 
      </tr> 
      <tr> 
       <td>ABUELOS #A09 - EAST PLANO</td> 
       <td>Regular Item, no issues</td> 
       <td>371</td> 
       <td>375</td> 
       <td>101</td> 
      </tr> 
      <tr> 
       <td>ABUELOS #A26 - MYRTLE BEACH</td> 
       <td>Credit - Product Quality (for credit adjustments only)</td> 
       <td>19</td> 
       <td>9</td> 
       <td>47</td> 
      </tr> 
      <tr> 
       <td>ABUELOS #A38 - LAKELAND</td> 
       <td>Regular Item, no issues</td> 
       <td>569</td> 
       <td>569</td> 
       <td>100</td> 
      </tr> 
      <tr> 
       <td class="bold">TOTAL</td> 
       <td></td> 
       <td class="bold">1581</td> 
       <td class="bold">1575</td> 
       <td class="bold">99.6</td> 


      </tr> 
     </table> 
    </div> 
</div> 
</div> 
<div class="row"> 
    <div class="col-lg-6"><br/></div> 
    <div class="col-lg-6"><br/></div> 
</div> 


</div> 
</body> 
</html>

источник

2016-08-14 20:59:34

tut tut tut inline css tut tut tut –

Поскольку высота каждого контейнера автоматически увеличивается по мере увеличения содержания. Поскольку четыре таблицы имеют разное содержимое, вы можете установить фиксированную высоту для решения проблемы.

источник

2016-08-15 08:22:52 athanzhang

Обычно я создаю свой собственный javascript для проверки каждой строки. Я даю все div, которые должны иметь одинаковую высоту (в вашем случае col-md-6 divs) дополнительный класс: match-height (отрыв существующего плагина matchHeight.js).

Этот код будет проходить через все .row divs и посмотреть, какие .match-height div является самым высоким. После этого код будет регулировать все те divs до самого высокого div, давая ему min-height CSS.

$(window).on("load resize", function equalHeights() { 

    $('.row').each(function(){ 
    var highestBox = 0; 
    $(this).find('.match-height').css("min-height", 0); 
    $(this).find('.match-height').each(function() { 
     if ($(this).outerHeight() > highestBox) { 
     highestBox = $(this).outerHeight(); 
     } 
    }); 
    $(this).find('.match-height').css("min-height", highestBox); 
    }); 

});

Пример:

<div class="container"> 
    <div class="row"> 
    <div class="col-md-6 match-height"> 
     1st table 
    </div> 
    <div class="col-md-6 match-height"> 
     2nd table 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-md-6 match-height"> 
     3rd table 
    </div> 
    <div class="col-md-6 match-height"> 
     4th table 
    </div> 
    </div> 
</div>

Позвольте мне знать, если это то, что вы ищете,

источник

2016-08-15 09:45:56

Прохладный, выглядит применимо. –

Кроме того, этот ответ интересен. используя только CSS. http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height –

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

ответ

Смежные вопросы