如何让两个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>
答
使用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>
真的吗? 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 -...来为你做。 –