Расположение текстовых блоков в две колонки

@Dmitrin · Регистрация: 04.12.2012

Author24 — интернет-сервис помощи студентам

Здравствуйте. Подскажите, как можно упорядочить элементы, как показано на рисунке? Бутстрап сеткой не получается, float тоже не помог. Как можно решить эту проблему? Желательно без js.

@Fedor92 · 09.10.2016, 19:21

Dmitrin, так?

HTML5

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Text_block</title>
        <style>
            *{box-sizing:border-box; margin: 0; padding: 0}
            html, body{width: 100%; height: 100%}
            .wrap{width: 60%; margin:0 auto}
            .left, .right{width: 49.5%}
            .left{float:left; margin-right:0.5%}     
            .right{float:right; margin-left:0.5%}
            .block{padding:10px; background: #ccc; margin-bottom:2%}
        </style>
    </head>
    <body>
    <div class="wrap">
        <div class="left">
            <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, tenetur maxime reiciendis earum praesentium quia voluptatem totam. Voluptate, praesentium tempore odio numquam necessitatibus reprehenderit quaerat voluptas veritatis incidunt veniam nisi.</div>
            <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, nulla, et, saepe, fugiat molestias hic fuga voluptatibus ipsum voluptate adipisci voluptas repellendus eligendi maiores. Vel, quaerat esse tempora atque vero.</div>
            <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, similique, animi, perspiciatis, sequi beatae libero necessitatibus ipsum architecto vitae quas nulla nostrum corporis tenetur id enim inventore odio sit doloremque.</div>
        </div>
        <div class="right">
            <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, error, unde et molestiae nostrum eum obcaecati quibusdam ut inventore natus maxime architecto autem adipisci incidunt voluptatem eaque nemo totam beatae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, error, unde et molestiae nostrum eum obcaecati quibusdam ut inventore natus maxime architecto autem adipisci incidunt voluptatem eaque nemo totam beatae!</div>
            <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, consequatur libero similique quae amet. Quas, minima, eum repudiandae nihil ipsam recusandae tempore excepturi facilis sint adipisci doloremque voluptate eos id.</div>
            <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, deserunt, optio, a, nesciunt consequuntur dicta numquam iste hic doloribus repellat similique porro assumenda eveniet dolores non natus mollitia excepturi soluta! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, error, unde et molestiae nostrum eum obcaecati quibusdam ut inventore natus maxime architecto autem adipisci incidunt voluptatem eaque nemo totam beatae!</div>
        </div>
    </div>  
    </body>
</html>

@Dmitrin · 09.10.2016, 19:25 **[ТС]**

Да, так) Спасибо большое)

@Dmitrin 23 / 23 / 11 Регистрация: 04.12.2012 Сообщений: 579
		1
	Расположение текстовых блоков в две колонки 09.10.2016, 19:05. Показов 1246. Ответов 2 Метки нет (Все метки) Здравствуйте. Подскажите, как можно упорядочить элементы, как показано на рисунке? Бутстрап сеткой не получается, float тоже не помог. Как можно решить эту проблему? Желательно без js. Миниатюры 0

@Dmitrin 23 / 23 / 11 Регистрация: 04.12.2012 Сообщений: 579
	09.10.2016, 19:25 [ТС]	3
	Да, так) Спасибо большое) 0

Расположение текстовых блоков в две колонки

Решение