部分不保持在同一水平

我是新的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;'。尝试一下 –

部分不保持在同一水平

回答

相关问题