Плавающий вправо, влево и вверх по сетке
У меня есть этот HTML:
<div class = "row">
<div class = "cell left">A</div>
<div class = "cell left">B</div>
<div class = "cell right">C</div>
<div class = "cell left">D</div>
<div class = "cell right">E</div>
<div class = "cell left">F</div>
</div>
Я хочу получить это:
Все «ячейки слева» должны быть выровнены по левому и верхнему краю. Все «правые ячейки» должны быть выровнены по правому и верхнему краю.
Макет HTML должен оставаться прежним. Как определить CSS с помощью FLEX или FLOAT? Порядок или количество ячеек в каждой строке неизвестны или нерегулярны.
Я пытался сделать это с помощью FLEX или FLOAT, но правые ячейки не выровнены по верхнему краю.
Ответы 2
Добро пожаловать в bartek stackoverflow, ознакомьтесь с этим решением.
По сути, мы создаем гибкий контейнер, который изгибается в направлении столбца, поэтому все элементы располагаются друг под другом. Затем мы увеличиваем ширину, чтобы у нас было достаточно места для ячеек слева и справа. Наконец, во флекс-контейнере вы можете выравнивать элементы по началу, центру или концу по вертикали или горизонтали. И поскольку у нас есть 2 разных класса с 2 разными выравниваниями, вместо того, чтобы выполнять одно выравнивание элементов для родительского элемента (строки), я сделал 2 самовыравнивания для каждого класса, один для flex-start и другой для flex-end. Дайте мне знать, если у вас есть еще вопросы.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width">
<title>JS Bin</title>
<style>
.row {
display: flex;
flex-direction: column;
width: 200px;
}
.left {
align-self: flex-start;
}
.right {
align-self: flex-end;
}
</style>
</head>
<body>
<div class = "row">
<div class = "cell left">A</div>
<div class = "cell left">B</div>
<div class = "cell right">C</div>
<div class = "cell left">D</div>
<div class = "cell right">E</div>
<div class = "cell left">F</div>
</div>
</body>
</html>Дело не в этом. Обратите внимание, что между B и D, D и F слева и между C и E справа есть пробелы. Кроме того, C не выровнен по верху. См. изображение «Пример» в моем посте.
Я не знаю, возможно ли это сделать без изменения фактического HTML. Я думаю, что размещение абсолютной позиции на правильных элементах может закрепить их наверху. Однако я не уверен, как бы вы создали пространство между ними, поскольку они абсолютно позиционированы. Я попробовал свойство nth-of-type и верхние приращения, но он просто переместил все нужные элементы.
Простым решением будет использование display: grid.
В display: grid можно указать размещение элементов, например:
/* In 2 columns of same size, auto place item by row and fill gaps */
grid-template-columns: repeat(2, 1fr);
grid-auto-flow: row dense;
Затем классы left и right могут указать, какие grid-columndiv должны быть размещены.
Вот краткий пример:
.row {
display: grid;
width: 500px;
grid-template-columns: repeat(2, 1fr);
grid-auto-flow: row dense;
gap: 12px;
outline: 2px solid #000;
padding: 12px;
}
.cell {
padding: 12px;
}
.left {
grid-column: 1 / span 1;
background-color: pink;
}
.right {
grid-column: 2 / span 1;
background-color: lightgreen;
}<div class = "row">
<div class = "cell left">A</div>
<div class = "cell left">B</div>
<div class = "cell right">C</div>
<div class = "cell left">D</div>
<div class = "cell right">E</div>
<div class = "cell left">F</div>
</div>
Вы вынуждены использовать flex или float, как следует из вашего вопроса, потому что сетка часто является лучшим решением для 2D-макетов, таких как у вас здесь.