Могу ли я установить разрыв столбца в многострочном макете CSS?

Question

У меня есть большой абзац текста, втекающий в многострочный макет CSS, растягивающий, скажем, два, три или четыре столбца, используя CSS hyphening. В какой-то момент один из текстов столбца должен быть закончен раньше, чтобы оставшаяся часть абзаца начиналась в верхней части второго столбца.

Есть ли способ, которым мы можем просто установить <column-break>, чтобы начать остальную часть текста в верхней части следующего столбца?

В настоящее время я набиваю столбец (которому нужен разрыв столбца) с большим количеством <br> s для удлинения столбца в HTML для достижения эффекта.

Кроме того, всякий раз, когда что-то изменяется в любом из столбцов, количество набивки <br> не соответствует требованиям, и его необходимо переоценить.

#multicolumn{ 
 
    -webkit-column-count: 2; /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 2; /* Firefox */ 
 
    column-count: 2; 
 
    
 
}

<div id="multicolumn">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam. 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>

See my JSFiddle.

Есть ли способ «закончить» первый столбец элегантно и сообщить браузеру, чтобы он оставил содержимое в следующих столбцах?

Answer 1

5. Column breaks

Когда содержимое выложен в нескольких столбцах, пользовательский агент должен определить, где разрывы столбцов размещаются. Проблема разбиения содержимого на столбцы аналогична разбиению содержимого на страницы.

Три новые свойства введены, чтобы разрывы столбцов быть описано в одних и тех же свойств, как разрывы страниц: «break-before», «break-after» и «break-inside». Эти свойства принимают значения , такие же как «page-break-before», «page-break-after» и «page-break-inside» [CSS21]. Кроме того, добавляются некоторые новые значения ключевого слова .

Эти свойства описывают поведение перерыва страницы/столбца до/после/внутри сгенерированной коробки. Эти значения нормативного определен в [CSS21]:

• auto: Ни сила, ни запрещают разрыв страницы/столбец до (после, внутри) генерируемого бокса.
• always: Всегда заставляйте разрыв страницы до (после) сгенерированной коробки.
• avoid: Избегайте перерыва страницы/столбца перед (после, внутри) сгенерированной коробкой.
• left: Настройте один или два разрыва страницы до (после) сгенерированного окна, чтобы следующая страница была отформатирована как левая страница.
• right: Настройте один или два разрыва страницы до (после) сгенерированного окна, чтобы следующая страница была отформатирована как правая страница.

Эта спецификация добавляет следующие новые значения:

• page: Всегда форсирует разрыв страницы до (после) генерируемого бокса.
• column: Всегда усиливайте разрыв столбца до (после) сгенерированной коробки.
• avoid-page: Избегайте разрыва страницы до (после, внутри) сгенерированной коробки.
• avoid-column: Избегайте разрыва колонны до (после, внутри) сгенерированной коробки.

Таким образом, вы могли бы использовать что-то вроде

#multicolumn { 
 
    -webkit-column-count: 2; /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 2; /* Firefox */ 
 
    column-count: 2; 
 
} 
 
.column { 
 
    break-before: column; 
 
    break-after: column; 
 
}

<div id="multicolumn"> 
 
    <div class="column">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div> 
 
    <div class="column">SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div> 
 
</div>

Однако, только Internet Explorer 10+ и Opera 11.10-12.1, кажется, поддерживают эти свойства.

Answer 2

Используйте теги <p>, чтобы различать абзацы.

<div id="multicolumn"> 
<p>FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
volutpat. Ut wisi enim ad minim veniam.</p> 
<div id="filler"></div> 
<p>SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate 
velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at 
vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum 
zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor 
cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim 
placerat facer possim assum.</p> 
</div> 

И CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); 

#multicolumn{ 
-webkit-column-count: 2; /* Chrome, Safari, Opera */ 
-moz-column-count: 2; /* Firefox */ 
column-count: 2; 

} 

#filler { 
float: left; 
position: relative; 
background-color: #f00; 
height: 120px; 
width: 50%; 

http://jsfiddle.net/mnz2h9hr/2/

В <p> теги хранит абзацы вместе, и 'наполнитель' (отмечен красным цветом) сохраняет зоны, свободной от текста.

Answer 3

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

.row { 
 
     margin: 0 -15px; 
 
    } 
 
    .column { 
 
     box-sizing: border-box; 
 
     float: left; 
 
     padding: 0 15px; 
 
     width: 50%; 
 
    }

<div id=row"> 
 
    <div class="column">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div> 
 
    <div class="column">SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div> 
 
</div>

Если вы используете WYSIWYG, чтобы ввести копию, то вы должны иметь доступ к кнопке источника, чтобы обернуть столбцы в дивы. Затем, используя приведенный выше код, столбцы становятся очень простыми; и легко реагировать.

Answer 4

Для вашей ситуации лучшим решением является использование сетки. Запустите фрагмент в полноэкранном режиме.

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container-fluid"> 
 
    <div class="row"> 
 
<div class="col-sm-6" style="background-color:lavenderblush;">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div> 
 
     <div class="col-sm-6" style="background-color:lavender;"> 
 
     SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis 
 
     dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div> 
 

 
    </div> 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

Answer 5

Одним из путей решения этого было бы на самом деле обернуть текст в пунктах (p теги), как вы должны сделать для семантики, а также, и не позволять вашей второй абзац ломаться, поскольку он никогда не превышает 1 столбец.

Этого можно достичь с помощью свойства CSS break-inside. https://developer.mozilla.org/en/docs/Web/CSS/break-inside

Пример кода на основе фрагмента:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 700); 
 
#multicolumn { 
 
    -webkit-column-count: 2; 
 
    /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 2; 
 
    /* Firefox */ 
 
    column-count: 2; 
 
} 
 
p { 
 
    font-size: 1em; 
 
    line-height: 1.4; 
 
    margin: 0; 
 
    padding: 0 0 1.4em; 
 
} 
 
p:nth-of-type(2) { 
 
    -webkit-column-break-inside: avoid; 
 
    page-break-inside: avoid; 
 
    break-inside: avoid; 
 
} 
 

<div id="multicolumn"> 
 
    <p>FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</p> 
 
    <p>SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p> 
 
</div>

Answer 6

Разрабатывая больше @Oriol ответ вы можете установить ширину так, первый столбец будет всегда использовать левую половину.

#multicolumn { 
 
    -webkit-column-count: 2; /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 2; /* Firefox */ 
 
    column-count: 2; 
 
} 
 

 
.column:nth-of-type(1) { 
 
width:50%; 
 
}

<div id="multicolumn"> 
 
    <div class="column">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div> 
 
    <div class="column">SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div> 
 
</div>

Answer 7

Технически не CSS многоколончатой ​​функцию вы ориентируетесь на колонку-брейк в, но это выглядит визуально похоже.

.column { 
    width : 46%; 
    margin: 0% 2%; 
    height: 100%; 
    float: left; 
} 

<div class="column">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div> 

<div class="column">SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div> 

Вот jsFiddle: http://jsfiddle.net/Vbr9d/242/