Place text as in layout

Question

Hello! How to arrange the text in the layout?

If not a ready-made solution, then at least the idea - Nikita Knyazev

soledar10 soledar10 22.4k 5 gold signs 21 silver marks 51 bronze marks · Accepted Answer · 2017-06-10T20:14:54

Example

* { 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>

ߊߚߤߘ ߊߚߤߘ 10.3k 6 gold signs 27 silver marks 58 bronze marks · Answer 2 · 2017-06-10T20:25:58

You can do without flex (refined the code from the @ soledar10 response ):

 * { 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>

Place text as in layout

2 answers 2

More articles: