Подтвердить что ты не робот

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

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

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

В настоящее время я заполняю столбец (который требует разрыва столбца) с большим количеством <br> для удлинения столбца в 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>
4b9b3361

ОТВЕТЫ

Ответ 1

5. Разрыв столбца

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

Вводятся три новых свойства, которые позволяют описанные в тех же свойствах, что и разрывы страниц: '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>

Ответ 2

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

Это может быть достигнуто с помощью свойства break-inside CSS. 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>

Ответ 3

Используйте теги <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> сохраняют абзацы вместе, а "filler" (отмечен красным) сохраняет область без текста.

Ответ 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>

Ответ 5

Если вы можете обернуть каждый столбец в 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>

Ответ 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>

Ответ 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/