Что такое CSS, чтобы что-то переходило на следующую строку страницы?

Как я могу сделать так, чтобы элемент автоматически располагался на новой строке страницы? В HTML я мог бы использовать <br>, но как мне добавить что-то вроде разрыва строки в CSS?

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

<p>Lorem ipsum dolor sit amet,
   <span id="elementId">consectetur adipisicing elit.</span>
   Magni totam velit ex delectus fuga fugit</p>

Диапазон по-прежнему располагается на той же строке, что и остальной текст. Как я могу переместить текст диапазона на новую строку исключительно через CSS?

Другой пример — использование display: inline-block или float:

<div class="smalldiv">Lorem ipsum dolor sit amet</div>
<div class="smalldiv">Lorem ipsum dolor sit amet</div>
<div class="smalldiv" id="elementId">Lorem ipsum dolor sit amet</div>
<div class="smalldiv">Lorem ipsum dolor sit amet</div>

.smalldiv {
    display: inline-block; // OR
    float: left;
}

Как я могу переместить один из <div> на новую строку, чтобы создать новую строку?


css positioning
person Justin Meltzer    schedule 03.04.2011    source источник
comment
Я... думаю, я бы с вами не согласился; что такое "что-то"?   -  person David says reinstate Monica    schedule 03.04.2011
comment
Вы хоть удосужились его посмотреть? Если только ваш вопрос не более сложен, как думает Дэвид.   -  person Andrew Marshall    schedule 03.04.2011
comment
возможный дубликат проблемы с позиционированием div ниже нескольких плавающих левых div   -  person js1568    schedule 17.08.2012
comment
Flexbox: tobiasahlin.com/blog/flexbox-break-to-new-row   -  person Ostap Bregin    schedule 17.08.2020

Ответы (3)


arrow_upward
90
arrow_downward

Есть два варианта, которые я могу придумать, но без подробностей я не могу быть уверен, какой из них лучше:

#elementId {
    display: block;
}

Это заставит элемент перейти на «новую строку», если он не находится на той же строке, что и плавающий элемент.

#elementId {
     clear: both;
}

Это заставит элемент очистить поплавки и перейти на «новую строку».

В случае, если элемент находится в той же строке, что и другой элемент, имеющий position из fixed или absolute, насколько мне известно, ничто не приведет к созданию «новой строки», поскольку эти элементы удаляются из обычного потока документа.

person David says reinstate Monica    schedule 03.04.2011
comment
Забавно, что это был ужасно написанный вопрос, но google все равно дал мне его как первое попадание, это было именно то, что я искал, и ответ тоже. - person neminem; 30.05.2013
comment
как насчет того, если родительский элемент является встроенным элементом. Это не работает, если это так. - person bflemi3; 08.01.2015

arrow_upward
9
arrow_downward

Отобразите элемент в виде блока:

display: block;
person Mårten Wikström    schedule 03.04.2011

arrow_upward
5
arrow_downward

Это зависит от того, почему что-то находится на одной строке в первую очередь.

clear в случае с плавающей запятой, display: block в случае естественного потока встроенного содержимого, ничто не заменит position: absolute, так как предыдущий элемент будет удален им из нормального потока.

person Quentin    schedule 03.04.2011
comment
@Andrew: br не css. - person David says reinstate Monica; 03.04.2011
comment
@ Дэвид, ха, упс :[ уже слишком поздно, наверное, это знак, что пора спать… - person Andrew Marshall; 03.04.2011