Не могу найти никакой документации, чтобы увидеть, сделал ли кто-нибудь это. Я полагаю, что это возможно через JavaScript или PHP. Я объясню, что я пытаюсь сделать так:

Предположим, я использую Twitter Bootstrap 4.

Скажем, у меня есть следующий контент в HTML:

<div class="row">
    <div class="col-12">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum posuere porta. Sed vitae dictum odio. Quisque nec rhoncus justo. Sed tempus pharetra convallis. Nunc rhoncus nibh nisi, eget lobortis nisl efficitur eget. Fusce nec tincidunt felis, id tempor arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec quis feugiat diam. Morbi diam nisl, iaculis in elit eget, venenatis consectetur augue.
        <p>Morbi aliquam, nisl pretium rhoncus interdum, tellus arcu lacinia purus, quis facilisis massa erat a sapien. Phasellus mollis accumsan erat vel pharetra. Nulla semper cursus neque, nec pretium quam porta id. Duis pretium non diam sit amet rhoncus. Quisque dictum urna sed magna pretium, eget tincidunt ligula condimentum. Sed id risus vitae lectus condimentum eleifend ut eget nisi. Nunc euismod, arcu et pharetra rhoncus, diam dui lobortis ex, a scelerisque leo ligula porttitor velit. Duis ultricies risus urna, quis interdum tellus lobortis sit amet. Morbi risus nibh, dignissim nec tincidunt id, pellentesque id nunc. Ut ultrices quam at lorem feugiat, eget laoreet sem auctor. In augue dolor, porta eget nulla sed, mattis euismod urna. Nullam vel sapien tellus. Vivamus et arcu at leo aliquam tempus vitae vel leo. Donec imperdiet lectus a diam aliquam, vitae ultricies dui vulputate. Nulla id urna enim. Quisque varius neque vitae egestas hendrerit.
        <p>Duis vitae imperdiet quam. Vestibulum congue finibus velit nec sagittis. Integer vel ex nulla. Nunc in urna dignissim, ullamcorper enim in, lobortis ligula. Vivamus tellus ligula, feugiat at diam ac, luctus vestibulum tortor. Cras congue magna vitae orci posuere volutpat. Duis eu eros rhoncus ligula auctor elementum. Fusce vulputate ante ut luctus fermentum. Sed ultricies, est eu lacinia rutrum, nibh purus dictum arcu, sit amet scelerisque tortor leo vel ligula. Praesent sem leo, volutpat sed erat vitae, consectetur maximus nibh. Ut at facilisis tellus. Sed urna ipsum, congue rhoncus turpis eget, semper commodo libero. Aliquam metus tellus, facilisis ut posuere vel, lacinia id ex.
        <p>Cras quis eros eleifend lorem tempus sodales. Sed semper sagittis aliquam. Integer a bibendum elit. Nunc dignissim vel elit id sodales. Phasellus non lorem dolor. Ut viverra diam sed lacus tincidunt, vel lobortis sapien sodales. Praesent ante mi, iaculis sed erat vel, ultricies eleifend eros. Donec a libero vestibulum, dictum orci quis, scelerisque orci. Maecenas volutpat ex eu ex fermentum interdum.
        <p>Cras ut elit risus. Sed semper mi mauris, vel bibendum augue pharetra efficitur. Vestibulum finibus elit sit amet velit blandit convallis et dignissim nisi. Etiam nec quam odio. Sed eget accumsan ante. Mauris cursus nibh a consectetur ornare. Proin molestie purus sit amet lacinia hendrerit. Sed in elit mauris. Donec pretium sapien libero. Aliquam sed tempus lorem. Cras maximus eu urna vitae ultricies. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque purus lorem, condimentum at eros vitae, sagittis vestibulum elit. Sed placerat sapien urna, eget suscipit massa pharetra in. Nulla efficitur ac ipsum non varius.
        <p>Donec quis consequat leo, in aliquet neque. Integer gravida faucibus diam id eleifend. Aenean at dolor nec ante aliquet consectetur. Nullam ullamcorper neque facilisis, faucibus nisl nec, volutpat elit. Fusce facilisis quis nisl sed lobortis. Suspendisse purus tellus, vulputate a tortor eu, pellentesque bibendum odio. Fusce nisl nisl, maximus non hendrerit non, accumsan eu nunc. Vivamus ex tortor, vulputate et tortor et, pellentesque lobortis orci.</p>
    </div>
</div>

Тем не менее, я хочу автоматически разделить содержимое выше пополам, когда экран> 768 пикселей и отображается так.

<div class="row">
    <div class="col-md-6">
        <!-- Half the content -->
    </div>
    <div class="col-md-6">
        <!-- Second half of content -->
    </div>
</div>

Что касается содержания:

  • Предположим, длина может быть изменена
  • Предположим, что количество пунктов может быть изменено

Есть несколько правил, которые также должны соблюдаться.

  • Контент может быть разделен только в конце абзаца
  • Разделение должно быть сделано на основе высоты абзаца, а НЕ на основе длины абзаца
  • Столбцы должны быть как можно ближе к одинаковой высоте

Можно ли это сделать и как лучше всего этого достичь?

Что касается моих личных предпочтений, было бы наиболее идеально, если бы я мог добиться этого с помощью PHP, второй вариант - jQuery.

3
J Robz 23 Фев 2018 в 20:50

4 ответа

Лучший ответ

Я думаю, что использование column-width в многостолбцовых CSS - это путь, если вы хотите, чтобы он был отзывчивым и разбивал абзацы на столбцы.

.row {
  column-width: 400px;
  column-gap: 10px;
}

p {
  padding: 10px;
  width: 100%; 
}

Демонстрация: https://www.codeply.com/go/UvsUTQDVcC

РЕДАКТИРОВАТЬ - единственный способ избежать разбиения абзацев - использовать break-inside: avoid;, но тогда это уменьшает четную высоту.

p {
 padding: 10px;
 width: 100%; 
 break-inside: avoid;
}

В качестве альтернативы можно использовать column-count:.. и затем определять запрос @media для каждой точки останова / ширины.

3
Zim 28 Окт 2019 в 14:25

Это намного проще, чем вы делаете это.

Вы можете включить несколько классов col для обработки при изменении размера экрана. Просто включите их для каждого размера экрана, а остальное будет выполнено загрузчиком.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />



<div class="row">
  <p class="col-lg-12 col-md-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum posuere porta. Sed vitae dictum odio. Quisque nec rhoncus justo. Sed tempus pharetra convallis. Nunc rhoncus nibh nisi, eget lobortis nisl efficitur eget. Fusce nec tincidunt felis,
    id tempor arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec quis feugiat diam. Morbi diam nisl, iaculis in elit eget, venenatis consectetur augue.
  </p>
  <p class="col-lg-12 col-md-6">Morbi aliquam, nisl pretium rhoncus interdum, tellus arcu lacinia purus, quis facilisis massa erat a sapien. Phasellus mollis accumsan erat vel pharetra. Nulla semper cursus neque, nec pretium quam porta id. Duis pretium non diam sit amet rhoncus. Quisque
    dictum urna sed magna pretium, eget tincidunt ligula condimentum. Sed id risus vitae lectus condimentum eleifend ut eget nisi. Nunc euismod, arcu et pharetra rhoncus, diam dui lobortis ex, a scelerisque leo ligula porttitor velit. Duis ultricies risus
    urna, quis interdum tellus lobortis sit amet. Morbi risus nibh, dignissim nec tincidunt id, pellentesque id nunc. Ut ultrices quam at lorem feugiat, eget laoreet sem auctor. In augue dolor, porta eget nulla sed, mattis euismod urna. Nullam vel sapien
    tellus. Vivamus et arcu at leo aliquam tempus vitae vel leo. Donec imperdiet lectus a diam aliquam, vitae ultricies dui vulputate. Nulla id urna enim. Quisque varius neque vitae egestas hendrerit.
  </p>
  <p class="col-lg-12 col-md-6">Duis vitae imperdiet quam. Vestibulum congue finibus velit nec sagittis. Integer vel ex nulla. Nunc in urna dignissim, ullamcorper enim in, lobortis ligula. Vivamus tellus ligula, feugiat at diam ac, luctus vestibulum tortor. Cras congue magna vitae
    orci posuere volutpat. Duis eu eros rhoncus ligula auctor elementum. Fusce vulputate ante ut luctus fermentum. Sed ultricies, est eu lacinia rutrum, nibh purus dictum arcu, sit amet scelerisque tortor leo vel ligula. Praesent sem leo, volutpat sed
    erat vitae, consectetur maximus nibh. Ut at facilisis tellus. Sed urna ipsum, congue rhoncus turpis eget, semper commodo libero. Aliquam metus tellus, facilisis ut posuere vel, lacinia id ex.
  </p>
  <p class="col-lg-12 col-md-6">Cras quis eros eleifend lorem tempus sodales. Sed semper sagittis aliquam. Integer a bibendum elit. Nunc dignissim vel elit id sodales. Phasellus non lorem dolor. Ut viverra diam sed lacus tincidunt, vel lobortis sapien sodales. Praesent ante mi, iaculis
    sed erat vel, ultricies eleifend eros. Donec a libero vestibulum, dictum orci quis, scelerisque orci. Maecenas volutpat ex eu ex fermentum interdum.
  </p>
  <p class="col-lg-12 col-md-6">Cras ut elit risus. Sed semper mi mauris, vel bibendum augue pharetra efficitur. Vestibulum finibus elit sit amet velit blandit convallis et dignissim nisi. Etiam nec quam odio. Sed eget accumsan ante. Mauris cursus nibh a consectetur ornare. Proin
    molestie purus sit amet lacinia hendrerit. Sed in elit mauris. Donec pretium sapien libero. Aliquam sed tempus lorem. Cras maximus eu urna vitae ultricies. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque
    purus lorem, condimentum at eros vitae, sagittis vestibulum elit. Sed placerat sapien urna, eget suscipit massa pharetra in. Nulla efficitur ac ipsum non varius.
  </p>
  <p class="col-lg-12 col-md-6">Donec quis consequat leo, in aliquet neque. Integer gravida faucibus diam id eleifend. Aenean at dolor nec ante aliquet consectetur. Nullam ullamcorper neque facilisis, faucibus nisl nec, volutpat elit. Fusce facilisis quis nisl sed lobortis. Suspendisse
    purus tellus, vulputate a tortor eu, pellentesque bibendum odio. Fusce nisl nisl, maximus non hendrerit non, accumsan eu nunc. Vivamus ex tortor, vulputate et tortor et, pellentesque lobortis orci.</p>
</div>
</div>
1
John Pavek 23 Фев 2018 в 19:22

Вы можете использовать, например, математику или что-то еще.

$(()=>{
  $(".splitme").each(function(){
    var lens = [];
    $(this).find("p").each(function(){lens.push($(this).text().length)});
    var target_col_len = lens.reduce((a,i)=>a+i,0)/2;
    var col_a = [], col_b = [], n = 0;
    for(var i=0; i<lens.length; i++){
      if(n+lens[i]<=target_col_len || Math.abs(n+lens[i]-target_col_len)<Math.abs(n-target_col_len)) col_a.push(i);
      else col_b.push(i);
      n+=lens[i];
    }
    var $c = $(this).clone();
    var $col_a = $('<div class="col-6">'), $col_b = $('<div class="col-6">');
    for(var i=0; i<col_a.length; i++) $col_a.append($c.find("p:eq("+i+")"));
    for(var i=0; i<col_b.length; i++) $col_b.append($c.find("p:eq("+i+")"));
    $(this).parent().empty().append($col_a).append($col_b);   
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-12 splitme">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum posuere porta. Sed vitae dictum odio. Quisque nec rhoncus justo. Sed tempus pharetra convallis. Nunc rhoncus nibh nisi, eget lobortis nisl efficitur eget. Fusce nec tincidunt felis, id tempor arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec quis feugiat diam. Morbi diam nisl, iaculis in elit eget, venenatis consectetur augue.
        <p>Morbi aliquam, nisl pretium rhoncus interdum, tellus arcu lacinia purus, quis facilisis massa erat a sapien. Phasellus mollis accumsan erat vel pharetra. Nulla semper cursus neque, nec pretium quam porta id. Duis pretium non diam sit amet rhoncus. Quisque dictum urna sed magna pretium, eget tincidunt ligula condimentum. Sed id risus vitae lectus condimentum eleifend ut eget nisi. Nunc euismod, arcu et pharetra rhoncus, diam dui lobortis ex, a scelerisque leo ligula porttitor velit. Duis ultricies risus urna, quis interdum tellus lobortis sit amet. Morbi risus nibh, dignissim nec tincidunt id, pellentesque id nunc. Ut ultrices quam at lorem feugiat, eget laoreet sem auctor. In augue dolor, porta eget nulla sed, mattis euismod urna. Nullam vel sapien tellus. Vivamus et arcu at leo aliquam tempus vitae vel leo. Donec imperdiet lectus a diam aliquam, vitae ultricies dui vulputate. Nulla id urna enim. Quisque varius neque vitae egestas hendrerit.
        <p>Duis vitae imperdiet quam. Vestibulum congue finibus velit nec sagittis. Integer vel ex nulla. Nunc in urna dignissim, ullamcorper enim in, lobortis ligula. Vivamus tellus ligula, feugiat at diam ac, luctus vestibulum tortor. Cras congue magna vitae orci posuere volutpat. Duis eu eros rhoncus ligula auctor elementum. Fusce vulputate ante ut luctus fermentum. Sed ultricies, est eu lacinia rutrum, nibh purus dictum arcu, sit amet scelerisque tortor leo vel ligula. Praesent sem leo, volutpat sed erat vitae, consectetur maximus nibh. Ut at facilisis tellus. Sed urna ipsum, congue rhoncus turpis eget, semper commodo libero. Aliquam metus tellus, facilisis ut posuere vel, lacinia id ex.
        <p>Cras quis eros eleifend lorem tempus sodales. Sed semper sagittis aliquam. Integer a bibendum elit. Nunc dignissim vel elit id sodales. Phasellus non lorem dolor. Ut viverra diam sed lacus tincidunt, vel lobortis sapien sodales. Praesent ante mi, iaculis sed erat vel, ultricies eleifend eros. Donec a libero vestibulum, dictum orci quis, scelerisque orci. Maecenas volutpat ex eu ex fermentum interdum.
        <p>Cras ut elit risus. Sed semper mi mauris, vel bibendum augue pharetra efficitur. Vestibulum finibus elit sit amet velit blandit convallis et dignissim nisi. Etiam nec quam odio. Sed eget accumsan ante. Mauris cursus nibh a consectetur ornare. Proin molestie purus sit amet lacinia hendrerit. Sed in elit mauris. Donec pretium sapien libero. Aliquam sed tempus lorem. Cras maximus eu urna vitae ultricies. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque purus lorem, condimentum at eros vitae, sagittis vestibulum elit. Sed placerat sapien urna, eget suscipit massa pharetra in. Nulla efficitur ac ipsum non varius.
        <p>Donec quis consequat leo, in aliquet neque. Integer gravida faucibus diam id eleifend. Aenean at dolor nec ante aliquet consectetur. Nullam ullamcorper neque facilisis, faucibus nisl nec, volutpat elit. Fusce facilisis quis nisl sed lobortis. Suspendisse purus tellus, vulputate a tortor eu, pellentesque bibendum odio. Fusce nisl nisl, maximus non hendrerit non, accumsan eu nunc. Vivamus ex tortor, vulputate et tortor et, pellentesque lobortis orci.</p>
    </div>
</div>

Редактировать .. Ответ другого парня гораздо менее глупый .. Я его голосую, ты тоже должен ..

1
I wrestled a bear once. 23 Фев 2018 в 18:21

Мое (по общему признанию, слабое) понимание начальной загрузки говорит мне, что class="col-lg-12 col-md-6" сделает ширину div, содержащего абзацы 12 единицами сетки шириной при «большой» ширине экрана, и 6 единиц при «средней» ширине экрана - но это не будет влиять на количество столбцов каждого абзаца ... весь div будет только уже.

Внутри этого div, кроме начальной загрузки, вы можете создавать несколько столбцов с простым CSS, используя столбцы или column-count свойство, как показано здесь :

div.row .multicol {
    column-count: 2;
}
<div class="row">
    <div class="col-12 multicol">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Fusce bibendum posuere porta. Sed vitae dictum odio. Quisque
        nec rhoncus justo. Sed tempus pharetra convallis. Nunc rhoncus
        nibh nisi, eget lobortis nisl efficitur eget. Fusce nec
        tincidunt felis, id tempor arcu. Interdum et malesuada fames
        ac ante ipsum primis in faucibus. Donec quis feugiat diam.
        Morbi diam nisl, iaculis in elit eget, venenatis consectetur
        augue.</p>

        <p>Morbi aliquam, nisl pretium rhoncus interdum, tellus arcu
        lacinia purus, quis facilisis massa erat a sapien. Phasellus
        mollis accumsan erat vel pharetra. Nulla semper cursus neque,
        nec pretium quam porta id. Duis pretium non diam sit amet
        rhoncus. Quisque dictum urna sed magna pretium, eget tincidunt
        ligula condimentum. Sed id risus vitae lectus condimentum
        eleifend ut eget nisi. Nunc euismod, arcu et pharetra rhoncus,
        diam dui lobortis ex, a scelerisque leo ligula porttitor
        velit. Duis ultricies risus urna, quis interdum tellus
        lobortis sit amet. Morbi risus nibh, dignissim nec tincidunt
        id, pellentesque id nunc. Ut ultrices quam at lorem feugiat,
        eget laoreet sem auctor. In augue dolor, porta eget nulla sed,
        mattis euismod urna. Nullam vel sapien tellus. Vivamus et arcu
        at leo aliquam tempus vitae vel leo. Donec imperdiet lectus a
        diam aliquam, vitae ultricies dui vulputate. Nulla id urna
        enim. Quisque varius neque vitae egestas hendrerit.</p>

        <p>Duis vitae imperdiet quam. Vestibulum congue finibus velit
        nec sagittis. Integer vel ex nulla. Nunc in urna dignissim,
        ullamcorper enim in, lobortis ligula. Vivamus tellus ligula,
        feugiat at diam ac, luctus vestibulum tortor. Cras congue
        magna vitae orci posuere volutpat. Duis eu eros rhoncus ligula
        auctor elementum. Fusce vulputate ante ut luctus fermentum.
        Sed ultricies, est eu lacinia rutrum, nibh purus dictum arcu,
        sit amet scelerisque tortor leo vel ligula. Praesent sem leo,
        volutpat sed erat vitae, consectetur maximus nibh. Ut at
        facilisis tellus. Sed urna ipsum, congue rhoncus turpis eget,
        semper commodo libero. Aliquam metus tellus, facilisis ut
        posuere vel, lacinia id ex.</p>

        <p>Cras quis eros eleifend lorem tempus sodales. Sed semper
        sagittis aliquam. Integer a bibendum elit. Nunc dignissim vel
        elit id sodales. Phasellus non lorem dolor. Ut viverra diam
        sed lacus tincidunt, vel lobortis sapien sodales. Praesent
        ante mi, iaculis sed erat vel, ultricies eleifend eros. Donec
        a libero vestibulum, dictum orci quis, scelerisque orci.
        Maecenas volutpat ex eu ex fermentum interdum.</p>

        <p>Cras ut elit risus. Sed semper mi mauris, vel bibendum
        augue pharetra efficitur. Vestibulum finibus elit sit amet
        velit blandit convallis et dignissim nisi. Etiam nec quam
        odio. Sed eget accumsan ante. Mauris cursus nibh a consectetur
        ornare. Proin molestie purus sit amet lacinia hendrerit. Sed
        in elit mauris. Donec pretium sapien libero. Aliquam sed
        tempus lorem. Cras maximus eu urna vitae ultricies. Orci
        varius natoque penatibus et magnis dis parturient montes,
        nascetur ridiculus mus. Quisque purus lorem, condimentum at
        eros vitae, sagittis vestibulum elit. Sed placerat sapien
        urna, eget suscipit massa pharetra in. Nulla efficitur ac
        ipsum non varius.</p>

        <p>Donec quis consequat leo, in aliquet neque. Integer gravida
        faucibus diam id eleifend. Aenean at dolor nec ante aliquet
        consectetur. Nullam ullamcorper neque facilisis, faucibus nisl
        nec, volutpat elit. Fusce facilisis quis nisl sed lobortis.
        Suspendisse purus tellus, vulputate a tortor eu, pellentesque
        bibendum odio. Fusce nisl nisl, maximus non hendrerit non,
        accumsan eu nunc. Vivamus ex tortor, vulputate et tortor et,
        pellentesque lobortis orci.</p>
    </div>
</div>

После этого вы можете получить несколько @media правил с различными { {X1}}, max-width, а также orientation, aspect-ratio и т. Д., В зависимости от ваших потребностей, для получения различного числа столбцов в разных ситуациях.


(обратите внимание, я также добавил закрывающие теги </p> к абзацам, что вам определенно следует сделать. Не позволяйте браузеру выводить их. Отправка неверной разметки в браузер приводит ее (их) в «режим причуд» и все ставки на то, как браузер собирается его интерпретировать, отключены, поэтому структура DOM становится непредсказуемой. Выбор всех элементов, будь то CSS или javascript (или начальная загрузка), основан на структуре DOM , не на самом тексте разметки.)

1
Stephen P 23 Фев 2018 в 18:40