0

Как сделать блок "блога", как на картинке, без использования 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 ответ 1

1

.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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.