1
私はHTML/CSSで新しく、簡単なウェブサイトを構築しようとしています。あなたは二つの部分（クラス=「oneNews」）が、依存がある見るように、ページの下部にセクションが同じレベルで維持されない
@import url('https://fonts.googleapis.com/css?family=Inconsolata');
html,body{
margin: 0;
padding: 0;
background-color: #708ebf;
}
a {
text-decoration: none;
color: black;
}
header {
width: 900px;
background-color: #0543a8;
margin-left: auto;
margin-right: auto;
padding-bottom: 0;
padding-top: 0;
}
#cmpName {
text-align: center;
font-family: 'Inconsolata', monospace;
font-size: 60px;
margin: 0;
}
nav {
margin: 0;
}
#navigation {
background-color: #0d52c1;
text-align: center;
padding: 0;
margin: 0;
margin-bottom: 20px;
margin-top: 20px;
}
#navigation li {
list-style-type: none;
font-family: 'Inconsolata', monospace;
display: inline;
font-size: 30px;
margin-left: 19px;
margin-right: 19px;
color: black;
}
#slideDiv{
width: 900px;
height: 450px;
margin-left: auto;
margin-right: auto;
position: relative;
right: 5px;
margin-bottom: 0;
padding-bottom: 0;
}
.slideImg {
width: 900px;
height: 450px;
display: inline;
position: absolute;
margin: 5px;
margin-top: 0;
margin-bottom: 0;
padding-bottom: 0;
}
#mainContent {
width: 900px;
margin-left: auto;
margin-right: auto;
border: solid;
padding: 0;
}
.oneNews {
display: inline-block;
border: solid;
margin: 10px;
width: 270px;
height: 500px;
padding: 0;
}
.newsImg {
width: 270px;
height: 150px;
padding: 0;
margin: 0;
}
.newsDscr {
width: 270px;
text-align: center;
height: 120px;
margin: 0;
padding: 0;
}
.newsHeader {
width: 270px;
text-align: center;
padding: 0;
margin: 0;
}
： HTMLでの私のコードは：
<!DOCTYPE html>
<html>
<head>
<title> Motors </title>
<script src="jquery-3.1.1.js"></script>
<link href="style.css" rel = "stylesheet" type="text/CSS" />
</head>
<body>
<header>
<h1 id="cmpName">
MOTORS
</h1>
<nav>
<ul id = "navigation">
<li> <a href="#"> HOME </a> </li>
<li> <a href="#"> CATALOGUE </a> </li>
<li> <a href="#"> ACHIVEMENTS </a> </li>
<li> <a href="#"> ABOUT US </a> </li>
<li> <a href="#"> CONTACT </a> </li>
</ul>
</nav>
<div id = "slideDiv">
<img class="slideImg" src="http://eskipaper.com/images/toyota-wallpaper-2.jpg" />
<img class="slideImg" src="http://www.hdwallpapers.in/walls/2013_lamborghini_aventador_lp700_4-wide.jpg"/>
<img class="slideImg" src="https://images7.alphacoders.com/318/318873.jpg"/>
<img class="slideImg" src="https://wallpaperscraft.com/image/ferrari_red_cars_sport_95424_3840x2400.jpg"/>
</div>
</header>
<section id="mainContent">
<section class="oneNews">
<h3 class = "newsHeader"> New Headquarters </h3>
<img src="http://acdn.architizer.com/thumbnails-PRODUCTION/ee/87/ee87914abbec5ba91890ea35110e7a0b.jpg" class = "newsImg"/>
<p class="newsDscr"> The headquarters for Spanish energy utility provider Endesa fuses innovative workplace design with a progressive environmental program. </p>
</section>
<section class="oneNews">
<h3 class = "newsHeader"> Shchumacher Wins </h3>
<img src="https://formula1.files.wordpress.com/2011/03/season2011_race1_wallpapers_01_1280x1024.jpg" class = "newsImg"/>
<p class="newsDscr"> In winning the Drivers' Championship he equalled the record set by Juan Manuel Fangio of five World Championships. Ferrari won 15 out of 17 races, and Schumacher won the title with six races remaining in the season. </p>
</section>
</section>
</body>
</html>
そして、私のCSSは次のようになります彼らの説明では、彼らは異なって整列し、同じレベルを維持していません。 何か提案がありますか？ P.S同じ意味を持つ質問は見つかりませんでしたが、リンクがあればこの質問を削除します。
あなたはブートストラップ[リンク]（http://getbootstrap.com/）を試してください。 – AMahajan