0
私はフラッシュカードを表示するHTML Webページで作業しています。これらのフラッシュカードには、前後の説明と、前後の画像またはリンクされたビデオの可能性があります。前面と背面は別々の区画に表示され、私はブートストラップを使用しています。私は各部門のバックグラウンドを白に設定していますが、そうした後、彼らは同じ高さではないことに気付きました。2つの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>
のような...のdiv兄弟姉妹のために同じ高さを設定するには、フレックスを使用しますか? https://www.google.com/search?q=make+two+divs+have+equal+height+and+width+bootstrap – mplungjan
図のように.row {display:flex;}を使用して高さを調整することができます:https://jsfiddle.net/tfcdn8pL/、幅については、ブートストラップで.col -...を使用してください。 –