Разместить текст как в макете

289

12 июня 2017, 21:39

Здравствуйте! Как расположить текст как в макете?

Answer 1

Пример

* { 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
 
body{ 
  padding-top: 70px; 
} 
 
.container { 
  max-width: 700px; 
  margin: 25px auto; 
} 
 
.container-row { 
  display: flex; 
  margin-bottom: 10px; 
} 
 
.item { 
  width: 50%; 
  padding: 10px; 
} 
 
.item:nth-of-type(1) { 
  text-align: right; 
}

<div class="container"> 
  <div class="container-row"> 
    <div class="item">Здравствуйте! Как расположить текст как в макете?</div> 
    <div class="item">Здравствуйте! Как расположить текст как в макете? Здравствуйте! Как расположить текст как в макете?</div> 
  </div> 
  <div class="container-row"> 
    <div class="item">Здравствуйте! Как расположить текст как в макете?</div> 
    <div class="item">Здравствуйте! Как расположить текст как в макете? Здравствуйте! Как расположить текст как в макете?</div> 
  </div> 
  <div class="container-row"> 
    <div class="item">Здравствуйте! Как расположить текст как в макете? Здравствуйте! Как расположить текст как в макете? Здравствуйте! Как расположить текст как в макете?</div> 
    <div class="item">Здравствуйте! Как расположить текст как в макете? Здравствуйте! Как расположить текст как в макете?</div> 
  </div> 
</div>

Answer 2

Можно обойтись и без flex (доработал код из ответа @soledar10):

* { 
  padding: 0; 
  margin: 0; 
} 
 
body{ 
  padding-top: 70px; 
} 
 
.container { 
  display: table; 
  max-width: 700px; 
  margin: 25px auto; 
} 
 
.container-row { 
  display: table-row; 
  margin-bottom: 10px; 
} 
 
.item { 
  display: table-cell; 
  width: 50%; 
  padding: 10px; 
} 
 
.item:first-child { 
  text-align: right; 
}

<div class="container"> 
  <div class="container-row"> 
    <div class="item">Здравствуйте! Как расположить текст как в макете?</div> 
    <div class="item">Здравствуйте! Как расположить текст как в макете? Здравствуйте! Как расположить текст как в макете?</div> 
  </div> 
  <div class="container-row"> 
    <div class="item">Здравствуйте! Как расположить текст как в макете?</div> 
    <div class="item">Здравствуйте! Как расположить текст как в макете? Здравствуйте! Как расположить текст как в макете?</div> 
  </div> 
  <div class="container-row"> 
    <div class="item">Здравствуйте! Как расположить текст как в макете? Здравствуйте! Как расположить текст как в макете? Здравствуйте! Как расположить текст как в макете?</div> 
    <div class="item">Здравствуйте! Как расположить текст как в макете? Здравствуйте! Как расположить текст как в макете?</div> 
  </div> 
</div>