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 that you have read and understand our privacy policy and code of conduct.

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