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: проценты сами подберете...

 

 

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

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


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

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

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

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

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

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

Войти

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

Войти сейчас

Карта разработчиков

Карта участников

Отметь себя на карте для поиска или предложения работы