CSS - разрыв элемента на месте (без возврата в начало строки)

Question

CSS - разрыв элемента на месте (без возврата в начало строки)

0

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

Интересно, могу ли я добиться эффекта таблицы без использования стандартного стиля и стиля таблицы CSS (используя display: table-cell делает другой неожиданный эффект).

Этот эффект у меня теперь есть (с дисплеем: inline)

|                                                             |
| [first element ][ second element ][ third element ][ fourth |
| element]                                                    |
|                                                             |

Это то, что я хочу:

|                                                               |
| [first element ][ second element ][ third element ][ fourth   |
|                                                      element] |
|                                                               |

Есть идеи?

ggolebio 22 дек. 2013, в 23:29

Источник

0

Как ваш элемент отображается снова? В <div>, <span>? Можете ли вы предоставить HTML из того, что вы пробовали до сих пор?
Milche Patern 22 дек. 2013, в 22:23

Теги:

html

css

line

line-breaks

3 ответа

0

Не зная своего макета html, вы можете просто заставить свой элемент вести себя как таблица.

<div class="table-like">
    <div class="td-like">element1</div>
    <div class="td-like">element1</div>
    <div class="td-like">element1</div>
    <div class="td-like">element1</div>
 </div>

.table-like {
    display:table;
    width:100%
}
.td-like {
    display:table-cell;
    width:25%
}

здесь

Milche Patern 22 дек. 2013, в 19:59

0

Без CSS вы можете просто добавить
перерывы в фактической разметке html, чтобы вы могли растянуть содержимое по вертикали. Thi решает проблему изменения шаблона.
Или с помощью CSS вы можете установить четвертый элемент как display: block; и плавать
Другой вариант - обернуть первые 3 элемента в div и добавить некоторые атрибуты в div

Вы должны указать конкретный пример кода, если это не совсем вам поможет.

Andrew 22 дек. 2013, в 19:57

Ещё вопросы

Как ваш элемент отображается снова? В <div>, <span>? Можете ли вы предоставить HTML из того, что вы пробовали до сих пор?

al3 · Accepted Answer · 2013-12-22T20-23-00.000Z

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

Я использую это решение. Это было лучшее для моих нужд. Кроме того, я использую ширину в процентах для всех элементов, чтобы заполнить оставшееся пространство в конце.
@ggolebio Рад, что это помогло, не могли бы вы отметить ответ как принятый, пожалуйста?