部分不保持在同一水平

我是新的HTML/CSS，我試圖建立一個簡單的網站。我的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是這樣的：

@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; 
}

在頁面的底部，當你看到有兩個部分（類=「oneNews」），但根據在他們的描述中，他們排列不同，並且不保持同一水平。有什麼建議爲什麼？ P.S我找不到任何含有相同含義的問題，但是如果有一個請鏈接，我將刪除此問題。

來源

2017-02-04 GeorgeDopeG

你應該試試bootstrap [link]（http://getbootstrap.com/）。 – AMahajan

將垂直對齊添加到您的班級。試試這個：

.oneNews { 
    display: inline-block; 
    border: solid; 
    margin: 10px; 
    width: 270px; 
    height: 500px; 
    padding: 0; 
    vertical-align: top; 
}

來源

2017-02-04 12:03:19

如果它解釋了哪裏出了問題，以及這個補充如何解決問題，這將會是一個更好的答案。 –

@B。 Desai它的工作，我很感激，但我有幾乎相同的代碼（不同的，但它是一個很小的部分），我從來沒有使用垂直對齊屬性，但他們很好，他們對齊在同一水平，儘管文本。你能解釋爲什麼發生這種情況嗎爲什麼更大的文本會使部分上升/下降？ – GeorgeDopeG

因爲你正在使用'display：inline-block;'如果你將它改爲'float：left'，那麼不需要添加'vertical-align：top;'。嘗試一下 –

部分不保持在同一水平

回答

相關問題