#css
#css
Вопрос:
Я пытаюсь написать общие селекторы css, которые будут упорядочивать любые элементы, обернутые внутри div, по вертикали или горизонтали. У меня нет контроля над элементами, которые будут размещены внутри внешнего div.
Например: В приведенном ниже фрагменте div (id = один), div (id = два) и button (id = три) должны отображаться в виде горизонтально расположенного списка элементов.
<div class="arrange-horizontally">
<div id="one"></div>
<div id="two"></div>
<button id="three"></button>
</div>
Аналогично, мне нужно написать другой CSS-селектор для упорядочивания элементов по вертикали.
<div class="arrange-vertically">
<div id="one"></div>
<div id="two"></div>
<button id="three"></button>
</div>
Я попробовал с помощью display:table-row (отображает эти элементы по горизонтали).
отображение: таблица-ячейка не упорядочивает элементы по вертикали.
На самом деле; сначала я ищу лучший подход, а затем решение.
Это CSS, который я использую для получения желаемого эффекта. Еще одно изменение, я удостоверяюсь, что любой из вертикальных или горизонтальных стилей div заключен в div with .приведенная ниже таблица — лишь один из примеров, и таких комбинаций может быть больше.
<div class="table>
<div class="arrange-vertically">
<div>
<button>1stverticallyPlacedElement</button>
</div>
<div class="arrange-horizontally">
<div>some comp1</div>
<div>some comp1</div>
<div>some comp2</div>
</div>
<button id="three">This is 3rd element in vertical block</button>
</div>
</div>
.table {
display: table;
}
.arrange-horizontally {
overflow-x:scroll;
}
.arrange-horizontally > * {
display:table-cell;
}
.arrange-vertically {
}
.arrange-vertically > * {
display:table-row;
}
Проблемы с этим —
-
Полосы прокрутки не появляются, когда я пытаюсь вставить много элементов в div в горизонтальном / вертикальном стиле.
-
Из приведенного выше примера кода ширина элемента «some comp1» изменяется в соответствии с шириной элемента «1stverticallyPlacedElement». Это определенно проблема.
Ответ №1:
Попробуйте это:
.arrange-horizontally > * {
display: inline-block;
text-align: center;
}
.arrange-vertically > * {
display: block;
}
Комментарии:
1. Это работает и для вложенных блоков. jsfiddle.net/eX35D Я попробую еще несколько вариантов использования.
2. как бы мы получили полосы прокрутки? Теперь, когда мы пытаемся переместить множество элементов в div с помощью arrange-horizontally, это перемещает элементы в следующую строку. JSFiddle : jsfiddle.net/eX35D/4
3. Если вы не хотите, чтобы горизонтальная полоса разбивалась на новые строки, вы можете использовать пробел: nowrap. jsfiddle.net/eX35D/5
4. Кстати: не уверен, что я правильно вас понял. Если вы намерены создать полосы прокрутки внизу страницы, то jsfiddle, который я опубликовал, будет достаточно. Если вы хотите удалить содержимое только блока упорядочивания по горизонтали, тогда все, что вам нужно сделать, это добавить «overflow: auto;» прямо под объявлением о пробелах.
5. да, мое намерение состояло в том, чтобы получить горизонтальную прокрутку только для div (блок упорядочивания по горизонтали), и overflow: auto сработал.
Ответ №2:
Используйте inline-block для отображения элементов div по горизонтали. Пример по вертикали смотрите в скрипке, это очень просто.
HTML:
<div id="horizontal">
<div>First one</div>
<div>Second one</div>
<div>Third one</div>
</div>
CSS:
.horizontal{
float: left;
border: 1px solid green
}
.horizontal *{
display: inline-block;
margin-left: 10px;
}
.vertical {
float: left;
width: 100%;
border: 1px solid blue
}
.vertical > *{
display :block;
width: 100%;
}
Ответ №3:
Вы пробовали использовать float? Все они выравниваются по горизонтали с помощью float. Или попробуйте поискать Встроенный дисплей. Для вертикального использования
используйте теги, а затем выровняйте по горизонтали сверху.