Мобильная версияКод: Выделить всё
/* Universal selector */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: rgb(255, 255, 255);
color: rgb(51, 51, 51);
font-family: sans-serif;
line-height: 1.4;
}
h1 {
text-align: center;
}
h2,
h3 {
text-align: left;
}
/* h2,
h3,
a,
ul,
li,
p {
margin-left: 52px;
} */
/* Product */
.product {
border: 5px solid black;
width: 1350px;
margin: 75px auto;
position: relative;
}
.product-title {
font-size: 30px;
font-weight: bold;
text-transform: uppercase;
background-color: rgba(88, 88, 88, 0.564);
padding: 25px;
}
.img-container {
display: flex;
justify-self: flex-start;
margin-bottom: 0;
}
/* Price and Shipping */
.price {
font-size: 22px;
/* margin-left: 71px; */
margin-bottom: 15px;
}
.price-adjust {
font-size: 28px;
}
.shipping {
font-size: 14px;
color: rgb(188, 188, 188);
font-weight: bold;
text-transform: uppercase;
margin-bottom: 5px;
/* margin-left: -10px */
}
/* SALE COMPONENT */
.sale {
background-color: rgb(214, 24, 24);
color: white;
border-radius: 5px;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
font-weight: bold;
padding: 10px 18px;
display: inline-block;
position: absolute;
top: -25px;
left: -104px;
}
.sale {
animation: wobble 1.5s ease-in-out 2;
transform-origin: center top;
transition: padding .1s;
cursor: pointer;
}
@keyframes wobble {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(3deg);
}
50% {
transform: rotate(-3deg);
}
75% {
transform: rotate(2deg);
}
100% {
transform: rotate(0deg);
}
}
/* MORE INFORMATION */
.more-info {
color: black;
font-size: 15px;
display: inline-block;
}
.info-margin {
margin-bottom: 60px;
}
.more-info:link {
color: black;
text-decoration: none;
display: inline-block;
}
.more-info:hover,
.more-info:active {
color: rgb(0, 0, 0);
text-decoration: underline;
transition: transform 0.1s;
transform: scale(1.2);
}
/* FEATURES */
.features-title {
text-transform: uppercase;
font-size: 16px;
margin-bottom: 15px;
}
.features-list {
font-size: 18px;
list-style: square;
/* margin-left: 94px; */
}
.features-list li {
margin-bottom: 5px;
}
.features-list li:last-child {
margin-bottom: 20px;
}
/* COLOR OPTIONS */
.color-div {
margin-left: 52px;
margin-bottom: 28px;
/* display: inline-block; */
.colors {
высота: 30 пикселей;
ширина: 30 пикселей;
фильтр: размытие;
border-radius: 50 пикселей;
поле справа: 10 пикселей;
отображение: встроенный блок;
}
.natural-leather {
цвет фона: rgb( 77, 51, 26)
}
.smokey-brown {
цвет фона: rgb(65, 55, 45);
}
.forest-green {
цвет фона: rgb(33, 54, 18);
}
.deep-blue {
background- color: rgb(3, 40, 67);
}
.sand {
background-color: rgb(164, 158, 141);
}< br />
.ashe {
background-color: rgb(79, 79, 79);
.colors:hover {
Transform : масштаб(2);
box-shadow: 0 0 0 2px rgba(165, 165, 165, 0,464);
переход: преобразование 0,2 с;
преобразование: масштаб (1,8);
курсор: указатель;
}
/* BUTTON */
.add-cart {
размер шрифта : 20 пикселей;
граница: 0 пикселей, сплошная;
цвет: rgb(253, 253, 253);
цвет фона: rgb(0, 0, 0);
ширина: 100%;
отступ: 20 пикселей;
курсор: указатель;
межбуквенный интервал: 1 пиксель;
}
.add-cart:hover {< br /> border-top: 4 пикселя, сплошной черный;
цвет: rgb(0, 0, 0);
размер шрифта: 21 пиксель;
шрифт: жирный;
background-color: rgb(255, 255, 255);
переход: преобразование 0,2 с;
}
.add-cart:active {
цвет: rgb (0, 0, 0);
размер шрифта: 21 пиксель;
вес шрифта: жирный;
цвет фона: rgb(255, 255, 255);
}
/* FLOATS */
/* .img-container {
float: left;
} */
/* .price-container {
ширина: 615 пикселей;
отступ справа: 50 пикселей;
float: вправо;
} */
< br />/* .features-container {
ширина: 615 пикселей;
отступ вправо: 50 пикселей;
float: вправо;
} */
/* исправление выравнивания */
/* .shipping {
float: right;
поля слева: -10 пикселей;
отступа справа: 140 пикселей;
} */
/* .more-info {
float: left;
} */
/* FLEXBOX */
.item-details-wrapper,
.features-container {
дисплей: блок;
ширина: авто;
ширина: 350 пикселей;
/* гибкость: 1; */
}
.details-wrapper {
display: flex;
justify-content: flex-end;
align-items: flex- start;
Код: Выделить всё
Men's Captain Cognac Boots
[*]
[url=https://thursdayboots.com/products/mens-captain-lace-up-boot-cognac?utm_source=bing&utm_medium=cse&utm_term=32582249644122&msclkid=94237b7509301dea36be1ee615806382&utm_campaign=CPCS%20- %20Фирменный%20-%20Десктоп%20 -%20Men%27s%20Captain&utm_content=Tobacco]
Дополнительная информация →
[/url]
< /div>
Продукт Особенности
[list]
Двухцветная кожа ручной работы, ограниченная серия
[*]Темный Кожа Anejo (тело) и какао (стойка, носок)
[*]
Двухцветный эффект минимален при слабом освещении,
с эффектом глаз- привлекательный вид при ярком свете
[*]Goodyear Welt Construction для долговечности
[*]Плоские вощеные хлопковые шнурки премиум-класса
< li>Антимикробные амортизирующие стельки Poron®.
[*]Пробковая межподошва, повторяющая форму стопы.
[*]Износостойкие стальные ножки. Прочная резина с шипами.< br /> [*]Подошвы, изготовленные вручную
[/list]
ДОБАВИТЬ В КОРЗИНУ
Я пытаюсь выровнять контейнеры справа от изображения, в этих контейнерах есть несколько элементов (текст и образцы цветов). Проблема, с которой я сталкиваюсь, заключается в том, что элементы остаются под изображением, которое находится в верхнем левом углу основного пространства. Проект заключается в создании вкладки, содержащей изображение продукта, сведения о цене, доставке и информации о продукте. Я использую flexbox для выравнивания элементов в ряд. Я не использую сетку.
Прилагается изображение выделенной области, в которой я хочу, чтобы отображался контент.
Код: Выделить всё
.item-details-wrapper,
.features-container {
display: block;
width: auto;
width: 350px;
/* flex: 1; */
}
.details-wrapper {
display: flex;
justify-content: flex-end;
align-items: flex-start;
This is what I have so far, I tried to change all sorts of flex setting but nothing is working.
I have the fixed width because I was thinking the content was taking up to much width and would not move up dynamically, but even with width: auto; not working.
Источник: https://stackoverflow.com/questions/781 ... th-flexbox
