Выравнивание тегов Div по одной строке
Я пытаюсь выровнять эти три элемента div так, чтобы два поля столбца 1 находились слева, сложены друг над другом, а поле столбца 2 было справа встроено с двумя столбцами один.
Я пробовал всевозможные комбинации display:inline-block/inline и float:left; но я просто не могу заставить эти вещи выстроиться в линию
<div id = "wrapper" width = "auto">
<div id = "left-container" style = "background-color:lightgray;width:10%;line-
height:95px;float:left;">
column1
</div>
<div id = "left-container" style = "background-color:gray;width:10%;line-height:95px;">
column1
</div>
<div id = "left-container" style = "background-color:lightblue;width:50%;line-
height:190px;">
column2
</div>
</div>Любая помощь высоко ценится!
Есть ли у вас какие-либо ограничения на допустимые ответы, потому что это, казалось бы, идеальный случай для Макет сетки CSS.
Также больше не используйте плавающие элементы для макета - с css3 есть гораздо лучшие способы делать что-то - например, flex или grid.
Также не используйте повторяющиеся идентификаторы. Бааад практика.
И width = "auto" как атрибут тоже ошибка. И в ваших line-height есть пробелы. Но можете ли вы вообще изменить HTML, или вы застряли в этой структуре?
Ответы 5
Используйте этот код
css
<style>
#wrapper > div{
display:inline-block;
}
</style>
Как это достигает цели OP, состоящей в том, чтобы два столбца «column1» располагались слева?
Если вы готовы заменить элемент, попробуйте, как показано ниже.
.left-container {
float: left
}
.left-container>div {
background-color: lightgray;
line-height: 95px;
}
.right-container {
background-color: lightblue;
width: 50%;
line-height: 190px;
float: right;
}<div id = "wrapper" width = "auto">
<div class = "left-container">
<div>
column1
</div>
<div>
column1
</div>
</div>
<div class = "right-container">
column2
</div>
</div>Мое предложение - попытаться избежать встроенного стиля, создать класс и добавить туда свои стили. в противном случае, если вы укажете свои стили во встроенном элементе, перезаписать стиль будет немного сложно.
Что-то вроде этого?
Вы можете работать с flex.
#wrapper {
display: flex;
}
.inner-wrapper {
min-width: 10px;
}
.left-container:nth-of-type(1) {
background-color: lightgray;
width: 100%;
line-height: 95px;
}
.left-container:nth-of-type(2) {
background-color: gray;
width: 100%;
line-height: 95px;
}
.left-container:only-of-type {
background-color: lightblue;
width: 100%;
line-height: 190px;
}<div id = "wrapper" width = "auto">
<div class = "inner-wrapper">
<div class = "left-container" style = "">
column1
</div>
<div class = "left-container" style = "">
column1
</div>
</div>
<div class = "inner-wrapper">
<div class = "left-container" style = "">
column2
</div>
</div>
</div>Большое спасибо! бонусные баллы за то, что я взял дубликаты идентификаторов (упс) и заставил их работать с nth-of-type, я понятия не имел, что это возможно :O
@JimmyBoy Я обновил свой ответ и ознакомился с этим руководством для :n-го типа. Иногда может быть полезен.
Я просто пишу базовый пример flexbox. Попробуйте это, я надеюсь, что это поможет вам. Спасибо
#wrapper {
display: flex;
}
#left-container {
display: flex;
flex-direction: column;
width: 100px;
}
#right-container {
display: flex;
width: 100px;
}
#left-container div,
#right-container div {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}<div id = "wrapper" width = "auto">
<div id = "left-container">
<div style = "background-color: lightgray; height: 20px;">
column1
</div>
<div style = "background-color: gray; height: 50px;">
column1
</div>
</div>
<div id = "right-container">
<div style = "background-color: lightblue;">
column2
</div>
</div>
</div>Сетчатое решение. Использование сетка-шаблон-столбцы для указания количества и размеров столбцов для каждого столбца, а затем использование сетка-столбец и сетка-ряд для указания места размещения элементов. Элемент с классом third занимает две строки:
.wrapper {
display: grid;
grid-template-columns: 10% 50%;
}
.column-1 {
background-color: gray;
}
.column-2 {
background-color: lightblue;
}
.first {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.second {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.third {
grid-column: 2 / 3;
grid-row: 1 / 3;
}<div class = "wrapper">
<div class = "column-1 first">
column1
</div>
<div class = "column-1 second">
column1
</div>
<div class = "column-2 third">
column2
</div>
</div>
Не используйте встроенный css. Используйте отдельную таблицу стилей css