HTML5: как избежать частичного перекрытия двух div?
Я использую этот шаблон: шаблон w3schools
разработать простой интернет-магазин. Он должен быть разделен на три вертикальные области: левую, среднюю и правую. Левая область — это своеобразный превью, в котором показано изображение выбранного товара. Средняя область содержит изображения продуктов: Всякий раз, когда продукт "выбирается" из этой средней области - путем наведения курсора мыши (на рабочем столе), этот продукт должен отображаться в левой области "предварительного просмотра". Правая область должна содержать таблицу всех выбранных продуктов.
Теперь у меня проблема, что левая и средняя области частично перекрываются на настольном ноутбуке (правая область еще не готова). Я хотел бы избежать этого частичного перекрытия. Как я могу этого добиться? Ниже мой css и html:
* { /* @see https://www.w3schools.com/css/css_rwd_grid.asp */
box-sizing: border-box; /* makes sure that the padding and the border are included in the total width and height of the elements. */
}
/* For mobile phones: Always Design for Mobile First!*/
[class* = "col-"] {
float: left;
padding: 15px;
width: 100%;
}
.productImage > *{
display :block;
}
.productImage{
float:left;
}
@media only screen and (min-width: 600px) { /* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) { /* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.tableImage{
height:250px;
width:250px;
padding: 5px;
}
.productImage:hover{
background-color:#ddd;
}
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
/* Style the footer */
.footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
.chosenProductDetailsImage{ /** style for the product's detailed image */
height:550px;
width:400px;
padding: 10px;
background-color: white;
}<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0"> <!-- https://www.w3schools.com/css/css_rwd_viewport.asp -->
<link rel = "stylesheet" href = "css/styles.css">
<script src = "js/onlineshop.js"></script>
<title>On-line shop</title>
</head>
<!-- Header -->
<body>
<div class = "row">
<div id = "leftDiv" class = "col-3 col-s-3">
<img alt = "" id = "chosenProductDetailsImageId" class = "chosenProductDetailsImage" src = ""/>
</div>
<div class = "col-7 col-s-9">
<div class = "productImage">
<img src = "images/[email protected]" alt= "product NA823E08M" class = "tableImage" onmouseout = "hideDetailImage();" onmouseover = "showDetailImage(this)"/>
<input type = "checkbox" id = "NA823E08M-H11@6" onclick = "setAddedToCart(this)" name = "addToCart" value = "Summer light skirt"/>
<span class = "addToCartSpan">Add to Cart</span>
<span class = "priceAb">ab <span class = "price">12,45 €</span></span>
</div>
<div class = "productImage">
<img src = "images/[email protected]" alt= "product A0F21S00I" class = "tableImage" onmouseout = "hideDetailImage();" onmouseover = "showDetailImage(this)"/>
<input type = "checkbox" id = "A0F21S00I-K11@7" onclick = "setAddedToCart(this)" name = "addToCart" value = "Summer jeans light"/>
<span class = "addToCartSpan">Add to Cart</span>
<span class = "priceAb">ab <span class = "price">13,99 €</span></span>
</div>
<div class = "productImage">
<img src = "images/[email protected]" alt= "product NA823F0VN" class = "tableImage" onmouseout = "hideDetailImage();" onmouseover = "showDetailImage(this)"/>
<input type = "checkbox" id = "NA823F0VN-E11@7" onclick = "setAddedToCart(this)" name = "addToCart" value = "Light Body Skirt"/>
<span class = "addToCartSpan">Add to Cart</span>
<span class = "priceAb">ab <span class = "price">8,00 €</span></span>
</div>
<div class = "productImage">
<img src = "images/[email protected]" alt= "product AGA21S008" class = "tableImage" onmouseout = "hideDetailImage();" onmouseover = "showDetailImage(this)"/>
<input type = "checkbox" id = "AGA21S008-K11@5" onclick = "setAddedToCart(this)" name = "addToCart" value = "Summer jeans classic"/>
<span class = "addToCartSpan">Add to Cart</span>
<span class = "priceAb">ab <span class = "price">7,99 €</span></span>
</div>
<div class = "productImage">
<img src = "images/[email protected]" alt= "product NX323F11F" class = "tableImage" onmouseout = "hideDetailImage();" onmouseover = "showDetailImage(this)"/>
<input type = "checkbox" id = "NX323F11F-E11@7" onclick = "setAddedToCart(this)" name = "addToCart" value = "Pijamma light"/>
<span class = "addToCartSpan">Add to Cart</span>
<span class = "priceAb">ab <span class = "price">16,99 €</span></span>
</div>
<div class = "productImage">
<img src = "images/[email protected]" alt= "product ARC21S002-C11@10" class = "tableImage" onmouseout = "hideDetailImage();" onmouseover = "showDetailImage(this)"/>
<input type = "checkbox" id = "ARC21S002-C11@10" onclick = "setAddedToCart(this)" name = "addToCart" value = "Blue jeans classic"/>
<span class = "addToCartSpan">Add to Cart</span>
<span class = "priceAb">ab <span class = "price">26,99 €</span></span>
</div>
<div class = "productImage">
<img src = "images/[email protected]" alt= "product OU523H01C" class = "tableImage" onmouseout = "hideDetailImage();" onmouseover = "showDetailImage(this)"/>
<input type = "checkbox" id = "OU523H01C-E11@7" onclick = "setAddedToCart(this)" name = "addToCart" value = "Summer T-shirt"/>
<span class = "addToCartSpan">Add to Cart</span>
<span class = "priceAb">ab <span class = "price">24,99 €</span></span>
</div>
<div class = "productImage">
<img src = "images/[email protected]" alt= "product IR221S001-K11@2" class = "tableImage" onmouseout = "hideDetailImage();" onmouseover = "showDetailImage(this)"/>
<input type = "checkbox" id = "IR221S001-K11@2" onclick = "setAddedToCart(this)" name = "addToCart" value = "Blue jeans patched"/>
<span class = "addToCartSpan">Add to Cart</span>
<span class = "priceAb">ab <span class = "price">27,99 €</span></span>
</div>
</div>
<div class = "col-2 col-s-12">
<div class = "aside">
<h2>What?</h2>
<p>Chania is a city on the island of Crete.</p>
<h2>Where?</h2>
<p>Crete is a Greek island in the Mediterranean Sea.</p>
<h2>How?</h2>
<p>You can reach Chania airport from all over Europe.</p>
</div>
</div> <!-- class = "col-3 col-s-12" -->
</div> <!-- class = "row" -->
<div class = "footer">
<p>Footer</p>
</div>
</body>
</html>
Улучшение производительности загрузки с помощью 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 страниц, которые помогут...
0
0
53
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Изменить порядок CSS Media Query и изменить ширину здесь .chosenProductDetailsImage100%
* { /* @see https://www.w3schools.com/css/css_rwd_grid.asp */
box-sizing: border-box; /* makes sure that the padding and the border are included in the total width and height of the elements. */
}
/* For mobile phones: Always Design for Mobile First!*/
[class* = "col-"] {
float: left;
padding: 15px;
width: 100%;
}
.productImage > *{
display :block;
}
.productImage{
float:left;
}
@media only screen and (min-width: 768px) { /* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.tableImage{
height:250px;
width:250px;
padding: 5px;
}
.productImage:hover{
background-color:#ddd;
}
}
@media only screen and (min-width: 600px) { /* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
/* Style the footer */
.footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
.chosenProductDetailsImage{ /** style for the product's detailed image */
height:550px;
width:100%;
padding: 10px;
background-color: white;
}<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0"> <!-- https://www.w3schools.com/css/css_rwd_viewport.asp -->
<link rel = "stylesheet" href = "css/styles.css">
<script src = "js/onlineshop.js"></script>
<title>On-line shop</title>
</head>
<!-- Header -->
<body>
<div class = "row">
<div id = "leftDiv" class = "col-3 col-s-3">
<img alt = "" id = "chosenProductDetailsImageId" class = "chosenProductDetailsImage" src = ""/>
</div>
<div class = "col-7 col-s-9">
<div class = "productImage">
<img src = "images/[email protected]" alt= "product NA823E08M" class = "tableImage" onmouseout = "hideDetailImage();" onmouseover = "showDetailImage(this)"/>
<input type = "checkbox" id = "NA823E08M-H11@6" onclick = "setAddedToCart(this)" name = "addToCart" value = "Summer light skirt"/>
<span class = "addToCartSpan">Add to Cart</span>
<span class = "priceAb">ab <span class = "price">12,45 €</span></span>
</div>
<div class = "productImage">
<img src = "images/[email protected]" alt= "product A0F21S00I" class = "tableImage" onmouseout = "hideDetailImage();" onmouseover = "showDetailImage(this)"/>
<input type = "checkbox" id = "A0F21S00I-K11@7" onclick = "setAddedToCart(this)" name = "addToCart" value = "Summer jeans light"/>
<span class = "addToCartSpan">Add to Cart</span>
<span class = "priceAb">ab <span class = "price">13,99 €</span></span>
</div>
<div class = "productImage">
<img src = "images/[email protected]" alt= "product NA823F0VN" class = "tableImage" onmouseout = "hideDetailImage();" onmouseover = "showDetailImage(this)"/>
<input type = "checkbox" id = "NA823F0VN-E11@7" onclick = "setAddedToCart(this)" name = "addToCart" value = "Light Body Skirt"/>
<span class = "addToCartSpan">Add to Cart</span>
<span class = "priceAb">ab <span class = "price">8,00 €</span></span>
</div>
<div class = "productImage">
<img src = "images/[email protected]" alt= "product AGA21S008" class = "tableImage" onmouseout = "hideDetailImage();" onmouseover = "showDetailImage(this)"/>
<input type = "checkbox" id = "AGA21S008-K11@5" onclick = "setAddedToCart(this)" name = "addToCart" value = "Summer jeans classic"/>
<span class = "addToCartSpan">Add to Cart</span>
<span class = "priceAb">ab <span class = "price">7,99 €</span></span>
</div>
<div class = "productImage">
<img src = "images/[email protected]" alt= "product NX323F11F" class = "tableImage" onmouseout = "hideDetailImage();" onmouseover = "showDetailImage(this)"/>
<input type = "checkbox" id = "NX323F11F-E11@7" onclick = "setAddedToCart(this)" name = "addToCart" value = "Pijamma light"/>
<span class = "addToCartSpan">Add to Cart</span>
<span class = "priceAb">ab <span class = "price">16,99 €</span></span>
</div>
<div class = "productImage">
<img src = "images/[email protected]" alt= "product ARC21S002-C11@10" class = "tableImage" onmouseout = "hideDetailImage();" onmouseover = "showDetailImage(this)"/>
<input type = "checkbox" id = "ARC21S002-C11@10" onclick = "setAddedToCart(this)" name = "addToCart" value = "Blue jeans classic"/>
<span class = "addToCartSpan">Add to Cart</span>
<span class = "priceAb">ab <span class = "price">26,99 €</span></span>
</div>
<div class = "productImage">
<img src = "images/[email protected]" alt= "product OU523H01C" class = "tableImage" onmouseout = "hideDetailImage();" onmouseover = "showDetailImage(this)"/>
<input type = "checkbox" id = "OU523H01C-E11@7" onclick = "setAddedToCart(this)" name = "addToCart" value = "Summer T-shirt"/>
<span class = "addToCartSpan">Add to Cart</span>
<span class = "priceAb">ab <span class = "price">24,99 €</span></span>
</div>
<div class = "productImage">
<img src = "images/[email protected]" alt= "product IR221S001-K11@2" class = "tableImage" onmouseout = "hideDetailImage();" onmouseover = "showDetailImage(this)"/>
<input type = "checkbox" id = "IR221S001-K11@2" onclick = "setAddedToCart(this)" name = "addToCart" value = "Blue jeans patched"/>
<span class = "addToCartSpan">Add to Cart</span>
<span class = "priceAb">ab <span class = "price">27,99 €</span></span>
</div>
</div>
<div class = "col-2 col-s-12">
<div class = "aside">
<h2>What?</h2>
<p>Chania is a city on the island of Crete.</p>
<h2>Where?</h2>
<p>Crete is a Greek island in the Mediterranean Sea.</p>
<h2>How?</h2>
<p>You can reach Chania airport from all over Europe.</p>
</div>
</div> <!-- class = "col-3 col-s-12" -->
</div> <!-- class = "row" -->
<div class = "footer">
<p>Footer</p>
</div>
</body>
</html>Другие вопросы по теме
Автоматическое развертывание всех панелей PrimeNG Accordion для печати
"позиция: липкая"; элементы не совсем совпадают
Bootstrap div - выравнивание по центру страницы
Горизонтальная и вертикальная полоса прокрутки, если содержимое выходит за пределы указанной ширины и высоты в div
Липкий элемент вверху при прокрутке
Скрытие счетчика ввода с помощью styled-component
Очистка кеша с помощью Laravel
Гамбургер меню покрывает логотип
Ввод внутри div не кликабельный
Как показать число только с усечением или css
Похожие вопросы
Как настроить разные модальные окна с другим содержимым, а также изменить кнопку?
"позиция: липкая"; элементы не совсем совпадают
Bootstrap div - выравнивание по центру страницы
Как отключить/включить кнопку отправки на основе даты, выбранной Datepicker?
Горизонтальная и вертикальная полоса прокрутки, если содержимое выходит за пределы указанной ширины и высоты в div
Как перебрать два «div» с разными данными на каждом?
Липкий элемент вверху при прокрутке
Как расширенный шаблон вызвать другой шаблон в jinja2?
Гамбургер меню покрывает логотип
Ввод внутри div не кликабельный
Спасибо! Я попробую и дам вам знать позже сегодня или завтра!