marc

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

Recommended Posts

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

<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

Share this post


Link to post
Share on other sites

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

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

 

 

Edited by Колхозник деревенский

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,382
    Total Members
    3,128
    Most Online
    VlGo
    Newest Member
    VlGo
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.