Размещение ящиков с помощью css
Я делаю html-страницу и имею 3 вида полей, у меня есть ширина 20% (названная одиночным полем) и ширина 40%, называемая двойным полем (оба имеют высоту 33%).
Другой bbox имеет высоту 100% (названную фотобоксом), ширину 40%.
Теперь я хочу плавать рядом друг с другом: дабл-бокс, сингл-бокс, фото-бокс. Тогда мне нужны все одиночные коробки, но одна коробка становится меньше 100% фото-бокса. Как я могу
html, body{
height: 100%;
background-color: #c5c5c5;
}
.screen{
width: 98%;
height: 98%;
margin: 1% 1% 1% 1%;
}
.dubble-box{
width: 40%;
height: 33%;
background-color: aqua;
float: left;
}
.single-box{
height: 33%;
width: 20%;
background-color: black;
float: left;
}
.picture-box{
width:40%;
height: 100%;
background-color: bisque;
float: left;
}<!DOCTYPE html>
<html>
<title></title>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link rel = "stylesheet" href = "reset.css"><!--resets css to default-->
<link rel = "stylesheet" href = "main.css"><!--gives css to page-->
<link rel = "shortcut icon" href = "lb.png" type = "image/png">
<body>
<div class = "screen">
<div class = "dubble-box">
<p> levi</p>
</div>
<div class = "single-box"></div>
<div class = "picture-box"></div>
<div class = "single-box"></div>
</div>
</body>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
1
29
0
Другие вопросы по теме
Форма наименьшего размера
Социальные сети сливаются с панелью навигации
Как исправить bulma css, создающий макет с одним столбцом после разрыва в точке 768, где он должен был быть макетом с двумя столбцами для планшетных устройств?
Не получается правильный вывод при попытке получить элемент стиля
Примените разные стили css к двум одинаковым тегам h4 с одинаковым именем класса
Как изменить цвет при наведении элемента, который присутствует в другом контейнере и не является родительским дочерним?
Подсказка выходит за пределы экрана
Как наложить тег audio внутри тега td
Как изменить CSS медиазапроса с помощью jQuery
Изменить цвет границы при наведении для Material UI TextField
Похожие вопросы
Форма наименьшего размера
Как заполнить текстовое поле данными (его значением базы данных) в ajax asp.net mvc?
Социальные сети сливаются с панелью навигации
Пользовательский элемент с не отображаемой тенью
Автоматическая вкладка не работает с текстом между ними?
Оператор Switch в тимелеафе не работает
Примените разные стили css к двум одинаковым тегам h4 с одинаковым именем класса
ПОЛУЧИТЬ http://127.0.0.1:8000/storage/profiles/ 404 (не найдено)
Как найти значение горячих точек (шаг, рыскание) по щелчку мыши в Google VR View Web
Css и импорт изображений не работают с весенней загрузкой в intellij
Дисплей: сетка не вариант? это типичный вариант использования такого макета.