0
私の問題は、3つのビデオをお互いに適切に配置する方法がわからないことです。何らかの理由で、常に狂った行動をして上に行くのです。私はフローティング、絶対配置、今でもテーブルをしようとしてもまだ動作しません！CSS 3/3つの埋め込みビデオを隣り合わせに配置するにはどうすればよいですか？
/* **************************** FONT IMPORTING ******************************* */
@import url('https://fonts.googleapis.com/css?family=Raleway');
/* ******************************************* GENERAL STYLING & RESET ******************************************** */
html, body {
\t margin: 0;
\t padding: 0;
\t width: 100%;
\t height: 100%;
\t color: #FFF;
\t background-color: #4b3832;
}
/* ******************************************* NAV BAR STYLING ******************************************** */
.headerInner {
\t width: 100%;
\t text-align: center;
\t background-color: #854442;
\t float: left;
}
.headerOuter h2 {
\t margin-left: 7%;
\t font-size: 200%;
\t color: #fff4e6;
\t font-family: "Raleway", sans-serif;
\t float: left;
}
nav {
\t width: 50%;
\t float: right;
\t padding: 20px;
}
.headerOuter nav ul li {
\t list-style: none;
\t display: inline;
\t float: left;
\t margin-right: 5%;
\t margin-bottom: 2%;
}
.headerOuter nav ul li a {
\t color: #fff4e6;
\t font-family: "Raleway", sans-serif;
\t text-decoration: none;
}
.headerOuter nav ul li a:hover {
\t color: #be9b7b;
}
/* ******************************************* INTRO SECTION STYLING ******************************************** */
.introOuter div {
\t margin: 7% 5% 15% 10%;
\t width: 40%;
\t float: left;
\t font-size: 150%;
}
.introOuter div h2 {
\t margin-left: 15%;
\t color: #ae0001;
}
.introOuter div p {
\t margin-bottom: 10%;
}
.introOuter div a {
\t padding: 2% 3%;
\t text-decoration: none;
\t color: #be9b7b;
\t margin: 10% 5% 5% 30%;
\t border: 2px solid #be9b7b;
}
.introOuter div a:hover {
\t color: #ae0001;
\t border: 2px solid #ae0001;
}
.introOuter img {
\t margin: 5% 15% 10% 0%;
\t float: right;
\t width: 400px;
\t height: 450px;
}
/* ******************************************* THREE COLUMNS SECTION STYLING ******************************************** */
.threeColumns {
\t float: left;
\t width: 100%;
\t margin: 5% auto;
\t background-color: #854442;
}
.oneThird {
\t float: left;
\t width: 28%;
\t font-size: 130%;
\t margin-left: 4.5%;
}
/* *************************************** VIDEO GALLERY SECTION STYLING ******************************* */
.videoGallery {
\t margin-top: 10%;
\t float: left;
\t width: 100%;
\t background-color: #854442;
}
.videoHeader {
\t float: left;
\t margin-left: 25%;
\t text-align: justify;
\t font-size: 150%;
\t width: 50%;
}
.videoHeader h2 {
\t margin-left: 35%;
}
.table {
\t display: table;
}
.row {
\t display: table-row;
}
.cell {
\t display: table-cell;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>HHH CORP</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<link rel="stylesheet" href="style/font-awesome/css/font-awesome.min.css" />
</head>
<body>
<!-- *************************************** NAV BAR ******************************* -->
<section class="headerOuter">
<div class="headerInner">
<h2>HHH CORP</h2>
<nav>
<ul>
<li><a href="#">TOP</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">OUR WORK</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>
</section>
<!-- *************************************** INTRO SECTION ******************************* -->
<section class="introOuter">
<div>
<h2>EXCELLENT WINE</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean maximus, nisl sed ornare pellentesque, urna nulla dignissim neque, a fermentum ligula ligula vestibulum risus. Ut non mi massa. Aliquam fermentum, leo ut sollicitudin porttitor, quam massa cursus ipsum, vitae blandit sapien odio vitae sapien. Vestibulum tincidunt a ligula nec gravida. </p>
<a href="#">CLICK ME!</a>
</div>
<img src="img/wine.png" />
</section>
<!-- *************************************** THREE COLUMNS SECTION ******************************* -->
<section class="threeColumns">
<div class="oneThird">
<h2>EXAMPLE HEADING</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean maximus, nisl sed ornare pellentesque, urna nulla dignissim neque, a fermentum ligula ligula vestibulum risus.</p>
</div>
<div class="oneThird">
<h2>EXAMPLE HEADING</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean maximus, nisl sed ornare pellentesque, urna nulla dignissim neque, a fermentum ligula ligula vestibulum risus.</p>
</div>
<div class="oneThird">
<h2>EXAMPLE HEADING</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean maximus, nisl sed ornare pellentesque, urna nulla dignissim neque, a fermentum ligula ligula vestibulum risus.</p>
</div>
</section>
<!-- *************************************** VIDEO GALLERY SECTION ******************************* -->
<section class="videoGallery">
<div class="videoHeader">
<h2>OUR WORK</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean maximus, nisl sed ornare pellentesque, urna nulla dignissim neque, a fermentum ligula ligula vestibulum risus.</p>
</div>
<div class="table">
<div class="row">
<div class="cell">
<iframe width="320" height="215"
src="https://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
<h2>A HEADER</h2>
</div>
<div class="cell">
<iframe width="320" height="215"
src="https://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>
<h2>A HEADER</h2>
</div>
<div class="cell">
<iframe width="320" height="215"
src="https://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>
<h2>A HEADER</h2>
</div>
</div>
</div>
</section>
<!-- *************************************** GRID SECTION ******************************* -->
<section class="theGrid">
<div class=grid1>
<img src="#">
</div>
<div class="grid2">
<h2>OUR WORK</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean maximus, nisl sed ornare pellentesque, urna nulla dignissim neque, a fermentum ligula ligula vestibulum risus.</p>
</div>
<div class="grid3">
<img src="#">
</div>
<div class="grid4">
<img src="#">
</div>
<div class="grid5">
<img src="#">
</div>
<div class="grid6">
<img src="#">
</div>
<div class="grid7">
<img src="#">
</div>
</section>
<!-- *************************************** CONTACT SECTION ******************************* -->
<div class="contact">
<h2>CONTACT US</h2>
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-youtube"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<!-- *************************************** COPYRIGHT SECTION ******************************* -->
<footer>
<p> © 2017 HHH CORP</p>
</footer>
-->
</body>
</html>
を試してみて、動作しているようですが、どのように1は、右/左の動画を配置するに取り掛かるん。私は今から画面の左側に遠く離れているので、テキストの下にそれらを中央に配置したいと思っています。私は右の代わりにマージン左を試みたが、それはそれらを2列にする。 –
レスポンシブなウェブデザインを試して、私が編集したHTMLとCSSをコピーしてください。 – b2ok