Разделы не поддерживаются на одном уровне

Я новичок в 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 Это сработало, и я благодарен за это, но у меня был почти такой же код (разные, но у него было множество небольших разделов), и я никогда не использовал свойство vertical-align, но они были в порядке, они выровнялись на одном уровне, несмотря на текст , Можете ли вы объяснить, почему это произошло? почему большие текстовые разделы поднимаются/опускаются? – GeorgeDopeG

Потому что вы используете 'display: inline-block;' Если вы меняете его на 'float: left', то не нужно добавлять' vertical-align: top; '. попробуй –

Разделы не поддерживаются на одном уровне

ответ

Смежные вопросы