Мобильная версияКод: Выделить всё
/* 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 {
height: 30px;
width: 30px;
filter: blur;
border-radius: 50px;
margin-right: 10px;
display: inline-block;
}
.natural-leather {
background-color: rgb(77, 51, 26)
}
.smokey-brown {
background-color: rgb(65, 55, 45);
}
.forest-green {
background-color: rgb(33, 54, 18);
}
.deep-blue {
background-color: rgb(3, 40, 67);
}
.sand {
background-color: rgb(164, 158, 141);
}
.ashe {
background-color: rgb(79, 79, 79);
}
.colors:hover {
transform: scale(2);
box-shadow: 0 0 0 2px rgba(165, 165, 165, 0.464);
transition: transform 0.2s;
transform: scale(1.8);
cursor: pointer;
}
/* BUTTON */
.add-cart {
font-size: 20px;
border: 0px solid;
color: rgb(253, 253, 253);
background-color: rgb(0, 0, 0);
width: 100%;
padding: 20px;
cursor: pointer;
letter-spacing: 1px;
}
.add-cart:hover {
border-top: 4px solid black;
color: rgb(0, 0, 0);
font-size: 21px;
font-weight: bold;
background-color: rgb(255, 255, 255);
transition: transform 0.2s;
}
.add-cart:active {
color: rgb(0, 0, 0);
font-size: 21px;
font-weight: bold;
background-color: rgb(255, 255, 255);
}
/* FLOATS */
/* .img-container {
float: left;
} */
/* .price-container {
width: 615px;
padding-right: 50px;
float: right;
} */
/* .features-container {
width: 615px;
padding-right: 50px;
float: right;
} */
/* alignment fix */
/* .shipping {
float: right;
margin-left: -10px;
padding-right: 140px;
} */
/* .more-info {
float: left;
} */
/* 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;
}Код: Выделить всё
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-%20Branded%20-%20Desktop%20-%20Men%27s%20Captain&utm_content=Tobacco]
More Information →
[/url]
Product Features
[list]
Limited Edition Two-Toned Hand Finished Leather
[*]Dark Anejo (Body) And Cacao (Counter, Cap Toe) Leather
[*]
Two-Toned effect is minimal in low light,
with an eye-catching look in bright light
[*]Goodyear Welt Construction for longevity
[*]Premium flat waxed cotton laces
[*]Poron® Antimicrobial Shock Absorbing Insoles
[*]Cork-Bed Midsoles that Form to Your Feet
[*]Hardwearing Steel Shanks Durable Studded Rubber
[*]Outsoles Handcrafted With Integrity
[/list]
ADD TO CART
Я пытаюсь выровнять контейнеры справа от изображения, эти контейнеры содержат несколько элементов (текст и образцы цвета). Проблема, с которой я сталкиваюсь, заключается в том, что элементы остаются под изображением, которое находится в верхнем левом углу основного пространства. Проект заключается в создании вкладки, содержащей изображение продукта, информацию о цене, доставке и информации о продукте. Я использую 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
