0

私はブートストラップを使用しており、埋め込みビデオと div を同じ高さで並べて表示したいと考えています。ここSOに投稿されたさまざまなソリューションを試しましたが、どれも機能しませんでした。

HTML & CSS は次のようになります。

header {
	background: url("../img/header.jpg");
	background-size: cover;
	min-height: 595px;
	font-family: Myriad Pro;
	color: #FFF;
	text-align: center;
	font-weight: bold;
	padding-top: 60px;
}

.headerForm {
	background-color: rgba(0, 0, 0, 0.6);
	border-radius: 8px;
	margin-top: 25px;
	padding: 25px;
	text-align: left;
	height: 100%;
}

.form {
	color: #fff;
	text-align: center;
	width: 100%;
}

.form input {
	color: #a5a5a5;
	margin-right: 5px;
	margin-top: 10px;
}

.headerVideo {
	border: 10px #FFF solid;
	border-radius: 8px;
	margin-top: 25px;
	margin-bottom: 25px;
}
<div class="container-fluid">
	<div class="row">
		<div>
			<header>
				<h2>Title</h2>
				<small>Slogan</small>
				<br>
				<div class="col-sm-6">
					<div class="headerForm">
						<h3>
							Be contacted by a  and receive
							updates about the new .
						</h3>
						<small class="form">
							Sign up for information about , events,
							demonstrations and more.
						</small>
						<form action="#" class="form">
							<input type="text" name="firstname" value="Etunimi">
							<input type="text" name="lastname" value="Sukunimi">
							<input type="email" name="email" value="Sähköposti">
							<input type="phone" name="phone" value="Puhelinnumero">
							<input type="text" name="address" value="Osoite">
							<input type="text" name="postal" value="Postinumero">
							<br>
							<input type="submit" value="Submit">
						</form>
					</div>
				</div>
				<div class="col-md-6">
					<div class="headerVideo embed-responsive embed-responsive-16by9">
						<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/gkTb9GP9lVI" allowfullscreen></iframe>
					</div>
				</div>
			</header>
		</div>
	</div>
</div>

ブラウザでの表示方法は次のとおりです。 デモ

そこの赤い四角形は、左の div が右の div と同じ高さを持っていないことを示しています。いつも同じ身長でいたい。どんな助けでも大歓迎です！

4

2 に答える 2

0

これに対する答えは明らかでした。.headerVideo と .headerForm の両方に固定の高さと固定の余白を追加しました。

.headerVideo {
    border: 10px #FFF solid;
    border-radius: 8px;
    margin-top: 25px;
    margin-bottom: 25px;
    height: 300px;
}

.headerForm {
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    margin-bottom: 25px;
    padding: 25px;
    text-align: left;
    height: 300px;
}
于 2015-10-28T16:52:27.847 に答える