Как сделать блок "блога" как на картинке
Как сделать блок "блога", как на картинке, без использования flex ?
.section_blog {
background-color: #fffcfc;
text-align: center;
padding-top: 80px;
}
.section_blog_image {}
.section_blog_text {
float: right;
width: 50%;
display: inline-block;
}
<section class="section_blog">
<h2>Blog</h2>
<section class="section_blog_1">
<section class="section_blog_image">
<img src="img/123.jpg" width="200" height="200">
<section class="section_blog_text">
<h2>What is Lorem Ipsum?</h2> <br>
<span>01.01.2017</span> <br>
<span>Contrary to popular belief, Lorem Ipsum is not simply random text.
It has roots in a piece of classical Latin literature from 45 BC, making
it over 2000 years old.</span>
</section>
</section>
</section>
<section class="section_blog_1">
<section class="section_blog_image">
<img src="img/456.jpg" width="200" height="200">
</section>
<section class="section_blog_text">
<h2>What is Lorem Ipsum?</h2> <br>
<span>31.12.2016</span> <br>
<span>Contrary to popular belief, Lorem Ipsum is not simply random text.
It has roots in a piece of classical Latin literature from 45 BC, making
it over 2000 years old.</span>
</section>
</section>
</section>
Ответы (1 шт):
Автор решения: Dmitriy Kondratiuk
→ Ссылка
.section_blog {
background-color: #fffcfc;
text-align: center;
padding-top: 80px;
}
.section_blog_image img {
float: left;
}
.section_blog_text {
width: 50%;
display: inline-block;
margin-left: 7px;
}
.section_blog_1 {
text-align: left;
margin-top: 15px;
}
.clear {
width: 100%;
clear: both;
}
<section class="section_blog">
<h2>Blog</h2>
<section class="section_blog_1">
<section class="section_blog_image">
<img src="img/123.jpg" width="200" height="200">
<section class="section_blog_text">
<h2>What is Lorem Ipsum?</h2> <br>
<span>01.01.2017</span> <br>
<span>Contrary to popular belief, Lorem Ipsum is not simply random text.
It has roots in a piece of classical Latin literature from 45 BC, making
it over 2000 years old.</span>
</section>
</section>
</section>
<div class="clear"></div>
<section class="section_blog_1">
<section class="section_blog_image">
<img src="img/456.jpg" width="200" height="200">
<section class="section_blog_text">
<h2>What is Lorem Ipsum?</h2> <br>
<span>31.12.2016</span> <br>
<span>Contrary to popular belief, Lorem Ipsum is not simply random text.
It has roots in a piece of classical Latin literature from 45 BC, making
it over 2000 years old.</span>
</section>
</section>
</section>
</section>
