marc

Разметка элементов

Рекомендованные сообщения

Привет, есть задание сверстать по макету вот эту часть, что на фото, это лучше сначала сделать общий блок, потом блок с текстом и блок с изображением? Есть такой код для текста:

<section id="about">
		<div class="container">
			<div class="title">
				<h2>
					About Us
				</h2>
				<p>
					Lorem ipsum dolor sit amet, consectetur.
				</p>
			</div>
			<div class="about clearfix">
				<div class="about_txt">
					<h3 class="left">July 2010 <span>Our humble beginnings</span></h3>
					<p class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente molestiae dolore sit sunt aspernatur quae.</p>
					<img src="img/about1.jpg" alt="">
				</div>
			
			</div>
		</div>
	</section>
.about{
	margin-top: 86px;
}

.about_txt{
	width: 300px;
	direction: rtl;
}

.about_txt h3{
	float: right;
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
}

.about_txt span{
	display: block;
	font-size: 18px;
	font-weight: bold;
	text-transform: capitalize;
}

.left{
  	margin-top: 25px;
  	float: left;
  	text-align: right;
}

.about_txt:after{
  	content: '';
  	display: table;
  	clear: both;
}

А как быть с изображением?

v1.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Я бы так сделал. 
Ну а картинку блоком так и ставите:
 

<div>
  <div class="about_txt"> // <— тут 35%
    <h3 class="left">July 2010 <span>Our humble beginnings</span></h3>
    <p class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente molestiae dolore sit sunt aspernatur quae.</p>
  </div>
  <div class="image-block"> <— тут 30%
    <img src="img/about1.jpg" alt="">
  </div>
  <div class="class"></div> <— тут 35%
</div>

 

 

v1.png.jpg

ps: проценты сами подберете...

 

 

Изменено пользователем Колхозник деревенский

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

Html & Html5 & Css course