@kirillgenets

Как сверстать этот блок?

Сверстал почти весь макет за исключением этого блока. На первой картинке показано, что должно получиться, а на второй - то, что получается у меня.5a9acf2b57749452303849.png5a9acf627fcda632346472.png
Вот код:
<section id="about">
			<div class="container">	
				<div class="title">
					<h2>
						About Us
					</h2>
					<p>
						Proin iaculis purus consequat sem cure. 
					</p>
				</div>
				<div class="aboutus">
					<div class="aboutus_item">						
						<div class="aimg">
							<img src="images/about1.jpg" alt="">
						</div>
						<h3>JULY 2010<br>Our Humble Beginnings</h3>
						<p>Proin iaculis purus consequat sem cure 
							digni ssim. Donec porttitora entum suscipit 
							aenean rhoncus posuere odio in tincidunt. Proin 
							iaculis purus consequat sem cure digni 
							ssim. Donec porttitora entum suscipit.</p>
					</div>
					<div class="aboutus_item">
						<div class="aimg">
							<img src="images/about2.jpg" alt="">
						</div>
						<h3>January 2011<br>Facing Startup Battles</h3>
						<p>Proin iaculis purus consequat sem cure 
							digni ssim. Donec porttitora entum suscipit 
							aenean rhoncus posuere odio in tincidunt. Proin 
							iaculis purus consequat sem cure digni 
							ssim. Donec porttitora entum suscipit.</p>
					</div>
					<div class="aboutus_item">
						<div class="aimg">
							<img src="images/about3.jpg" alt="">
						</div>
						<h3>December 2012<br>Enter The Dark Days</h3>
						<p>Proin iaculis purus consequat sem cure 
							digni ssim. Donec porttitora entum suscipit 
							aenean rhoncus posuere odio in tincidunt. Proin 
							iaculis purus consequat sem cure digni 
							ssim. Donec porttitora entum suscipit.</p>
					</div>
					<div class="aboutus_item">
						<div class="aimg">
							<img src="images/about4.jpg" alt="">
						</div>
						<h3>February 2014<br>Our Triumph</h3>
						<p>Proin iaculis purus consequat sem cure 
							digni ssim. Donec porttitora entum suscipit 
							aenean rhoncus posuere odio in tincidunt. Proin 
							iaculis purus consequat sem cure digni 
							ssim. Donec porttitora entum suscipit.</p>
					</div>
				</div>
			</div>				
			</div>			
		</section>

.aboutus_item {
	margin-bottom: 360px;
}

.aimg {
	width: 184px;
	margin: 0 auto;
}

.aimg:nth-child(odd) {
	float: right;
}

.aimg:nth-child(even) {
	float: left;
}

В чём ошибка? Как правильно сверстать этот элемент? Напишите, пожалуйста, правильный код к этому элементу. Заранее спасибо
  • Вопрос задан
  • 258 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега CSS
.aimg:nth-child(odd) {
  float: right;
}

.aimg:nth-child(even) {
  float: left;
}

Но ведь каждый .aimg лежит внутри .aboutus_item. Наверное, имелось в виду

.aboutus_item:nth-child(odd) .aimg {
  float: right;
}

.aboutus_item:nth-child(even) .aimg {
  float: left;
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы