#html #css
#HTML #css
Вопрос:
То, что я пытаюсь создать, выглядит следующим образом:
--------------------------------------------------
| | | |
| | .box1 | .box2 |
| | | |
| .image -------------------------
| | |
| | .description |
| | |
| | |
--------------------------------------------------
Где .box1 и .box2 будут одинаковой высоты по сравнению друг с другом (например flex: 1; ), а изображение и оболочка вокруг .box1, .box2 и .description также будут одинакового размера.
Я просто не могу найти способ, который делает именно это, я решил, что примеры Flexbox редки для этого случая.
Я думал, что для этого примера подойдет таблица с вложенной таблицей, подобной следующей:
<table class="parent-wrapper">
<tr>
<td class="image">
<img src="...."/>
</td>
<td class="parent-box">
<table class="child-wrapper">
<tr>
<td class="box1">.box1</td>
<td class="box2">.box2</td>
</tr>
<tr>
<!-- I don't know a workaround for this as well -->
<td class="description" colspan="2">.description</td>
</tr>
</table>
</td>
</tr>
</table>
Но это получается следующим образом:
Я хочу, чтобы размер ‘image’ td был такой же высоты, как у ‘child-wrapper’ td
Итак, это: (сделано с жестко заданными высотами)
Комментарии:
1. Все работает нормально.
2. Таблицы следует использовать только для табличных данных, а не для макета (если это не шаблон электронной почты)
3. Повторяя то, что сказал @Pete, таблицы предназначены для табличных данных. Для лучшей семантики и соответствия WCAG (веб-доступность) было бы лучше переключиться на divs и использовать flexbox для макетов, где это возможно.
Ответ №1:
Пример Flexbox:
Для этого не нужна таблица!
Редактировать: обновлено в соответствии с требованиями. Поиграйте с (сокращенными flex-basis ) 20% и min-width 250px на .image свой вкус. Обратите внимание, что я задаю фоновое изображение через style, поскольку предполагаю, что оно будет исходить из серверной части.
Возможно, вам также нужна минимальная высота вашего основного контейнера.
.block {
display: flex;
}
.image {
flex: 0 1 20%;
min-width: 250px;
background: #f00;
color: #fff;
background-size: cover;
background-position: 50% 50%;
}
.image img {
display: block;
width: 100%;
height: auto;
}
.content {
display: flex;
flex-direction: column;
flex: 1;
}
.boxes {
display: flex;
flex: 1;
}
.box1 {
background: cyan;
flex: 1;
}
.box2 {
background: yellow;
flex: 1;
}
.description {
flex: 1;
background: #531777;
color: #fff;
} <div class="block">
<div class="image" style="background-image: url('https://s-media-cache-ak0.pinimg.com/236x/c8/e8/cc/c8e8cc83e6eeb60061ba11c9d8ba9a11.jpg')">
</div>
<div class="content">
<div class="boxes">
<div class="box box1">
.box1
</div>
<div class="box box2">
.box2
</div>
</div>
<div class="description">
.description
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis sed augue eu pulvinar. Cras sodales tortor ac mauris bibendum, quis sagittis quam viverra. Aliquam erat volutpat. Pellentesque ullamcorper porta metus, nec efficitur lorem vulputate quis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean vel dui et eros gravida bibendum. Nunc pulvinar commodo facilisis.
</div>
</div>
</div> Комментарии:
1. Теперь проблема здесь в том, что класс ‘content’ растягивается, хотя я хочу, чтобы класс ‘image’ зависел от высоты класса ‘content’. (теперь они зависят друг от друга, но я хочу переполнить изображение)
2. @Ivaro18 итак, вы согласны с гибкостью ширины
.image(при сохранении соотношения изображения)?3. да, изображение должно сохранять свое соотношение, это пример изображения здания, но обычное изображение было бы скорее шаблоном, где содержимое сосредоточено, но у меня уже есть css для этого
4. @Ivaro18 Изображение всегда имеет одинаковое соотношение?
5. Да! спасибо, что нашли время, чтобы понять запрос 🙂
Ответ №2:
Попробуйте это:
.parent-1 {
display: flex;
flex-direction: row;
}
.parent-2 {
display: flex;
flex-direction: column;
flex-basis: 400px;
height: 250px;
}
.box-2 {
flex-basis: 50%;
height: 50px;
background-color: rgb(38, 60, 99);
}
.box-3 {
flex-basis: 50%;
height: 50px;
background-color: rgb(185, 195, 28);
}
.parent-3 {
display: flex;
} <div class="parent-1">
<div class="box-1">
<img src="img-1.jpg" alt="img" width="200" height="200">
</div>
<div class="parent-2">
<div class="parent-3">
<div class="box-2"></div>
<div class="box-3"></div>
</div>
<div class="box-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div> Ответ №3:
Вы должны включить colspan в свой td с описанием.
<td class="descrtiption" colspan="2">.description</td>
Ответ №4:
Проверьте приведенный ниже код.. вы получите некоторое представление.. Скриншот результата с кодом ниже
table{
width:100%
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding:5px;
}
th, td {
padding:35px;
} <table class="parent-wrapper">
<tr>
<td class="image" rowspan="2">
Image
</td>
<td class="box">
Box
</td>
<td class="box">
Box
</td>
</tr>
<tr>
<td class="box" colspan="2">
Description
</td>
</tr>
</table> Комментарии:
1. Чего именно вы хотите?
2. Как вы можете видеть, размер ‘дочерней оболочки’ td изменяется до высоты изображения, но я бы хотел, чтобы размер ‘изображения’ соответствовал высоте ‘дочерней оболочки’
3. причина в том, что вы используете вложенную таблицу … лучше всего писать одну таблицу и избегать вложенности…
4. рекомендуется не использовать таблицу