如何讓兩個div具有相同的高度和寬度？

我正在顯示flashcards的HTML網頁上工作。這些閃卡具有正面和背面的描述，以及在正面和背面有圖像或鏈接視頻的可能性。正面和背面顯示在單獨的div中，我正在使用Bootstrap。我將每個div的背景設置爲白色，但是在這樣做後，我意識到它們不是同一個高度。如何讓兩個div具有相同的高度和寬度？

如所示的圖像在上述這不起作用。

#front_card, 
 
#back_card { 
 
    background-color: white; 
 
} 
 

 
.row.col-sm-4 { 
 
    display: flex; 
 
} 
 

 
.col-sm-4 { 
 
    flex: 1; 
 
    padding: 1em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
<div class="row" id="study-row"> 
 
    <div class="col-sm-4" id="white-col"> 
 
    <h3> Front </h3> 
 
    <div id="front_card"></div> 
 
    </div> 
 
    <div class="col-sm-4" id="white-col"> 
 
    <h3> Back </h3> 
 
    <div id="back_card"></div> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
    <button class="right" id="flip_card" type="submit">Flip Card</button><br /> <br /> 
 
    <button class="right" id="next_card" type="submit">Next Card</button><br /> 
 
    </div> 
 
</div>

來源

2017-04-20 lillemap

真的嗎？ https://www.google.com/search?q=make+two+divs+have+equal+height+and+width+bootstrap – mplungjan

您可以嘗試使用.row {display：flex;}來調整高度，如圖所示：https://jsfiddle.net/tfcdn8pL/，關於寬度，bootstrap應該通過使用.col -...來爲你做。 –

使用Flex來設置DIV的兄弟姐妹相同的高度......這樣

#front_card, 
 
#back_card { 
 
    background-color: red; 
 
    padding:5px; 
 
    overflow:hidden; 
 
    min-height:100%; 
 
} 
 
#front_card img{ 
 
width:100%; 
 
} 
 

 
.row{ 
 
    display: flex; 
 
} 
 

 
.col-sm-4,.col-xs-4 { 
 
    flex: 1; 
 
    padding: 1em; 
 

 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
<div class="row" id="study-row"> 
 
    <div class="col-sm-4 col-xs-4" id="white-col"> 
 
    <h3> Front </h3> 
 
    <div id="front_card"> 
 
     <img src="http://placehold.it/150x350"> 
 
    </div> 
 
    </div> 
 
    <div class="col-sm-4 col-xs-4" id="white-col"> 
 
    <h3> Back </h3> 
 
    <div id="back_card"></div> 
 
    </div> 
 
    <div class="col-sm-4 col-xs-4"> 
 
    <button class="right" id="flip_card" type="submit">Flip Card</button><br /> <br /> 
 
    <button class="right" id="next_card" type="submit">Next Card</button><br /> 
 
    </div> 
 
</div>

來源

2017-04-20 12:56:53

如何讓兩個div具有相同的高度和寬度？

回答

相關問題