我正在設計一家在線服裝店,在產品頁面上,我希望產品資訊(右側)與影像中心(左側)對齊,而兩個 div 都以頁面為中心。但是,似乎無論我做什么,產品資訊總是被推到影像的底角。它在影像被完全洗掉時起作用,但除非發生這種情況,否則 CSS 中的格式不會影響產品資訊 div。
我嘗試將元素浮動到左側,但這否定了使它們居中的文本對齊,并且我對產品資訊所做的任何填充、邊距或尺寸更改只會添加到 div 的底部而不是移動它向上。我可能忽略了一些明顯的事情,但我一直在研究這個問題很長時間,似乎無法找到解決辦法。
有人可以幫幫我嗎?
> 外觀截圖 <
* {
margin: 0px;
padding: 0px;
}
.product {
text-align: center;
}
.product-view {
top: 40px;
padding: 10px;
margin: 10px;
display: inline-block;
}
#product-image {
width: 400px;
height: 40%;
min-width: 40%;
min-height: 40%;
padding: 20px;
}
.product-info {
display: inline-block;
padding: 10px;
margin: 10px;
}
#product-name {
font-size: 25px;
text-transform: uppercase;
text-align: left;
}
#product-price {
font-size: 20px;
padding: 20px 0px;
text-align: left;
}
.product-info hr {
width: 278px;
opacity: 0.4;
}
#product-sizes {
padding: 5px;
text-align: center;
text-transform: uppercase;
width: fit-content;
}
#size-radio-btn {
display: inline-block;
width: 40px;
height: 40px;
text-align: center;
font-size: 15px;
border: 1px solid black;
margin: 5px 10px;
margin-left: 5px;
margin-right: 5px;
line-height: 40px;
color: black;
cursor: pointer;
}
#add-to-cart {
width: 278px;
height: 40px;
margin: 0 5px;
cursor: pointer;
background-color: black;
color: white;
text-transform: uppercase;
font-size: 15px;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="content">
<div class="product">
<div class="product-view">
<img id="product-image" src="/Media/hoodieblack.png">
</div>
<div class="product-info">
<div id="product-name">
<h3>Hoodie - Black</h3>
</div>
<div id="product-price">
<p>$80.00</p>
</div>
<hr>
<div id="product-sizes">
<label for="size-select">Size</label>
<div id="size-select">
<input type="radio" name="size" value="s" hidden id="s-size">
<label for="s-size" id="size-radio-btn">S</label>
<input type="radio" name="size" value="m" hidden id="m-size">
<label for="m-size" id="size-radio-btn">M</label>
<input type="radio" name="size" value="l" hidden id="l-size">
<label for="l-size" id="size-radio-btn">L</label>
<input type="radio" name="size" value="xl" hidden id="xl-size">
<label for="xl-size" id="size-radio-btn">XL</label>
<input type="radio" name="size" value="xxl" hidden id="xxl-size">
<label for="xxl-size" id="size-radio-btn">XXL</label>
</div>
</div>
<button type="button" id="add-to-cart">Add to Cart</button>
</div>
</div>
</div>
</body>
</html>
uj5u.com熱心網友回復:
只需添加display: flex;
到主父級,在這種情況下,.product
. 然后,您可以使用align-items: center;
使它們彼此對齊。
您還可以添加max-width: 100%;
到影像中,以便相應地調整大小。
* {
margin: 0px;
padding: 0px;
}
.product {
text-align: center;
}
.product-view {
top: 40px;
padding: 10px;
margin: 10px;
display: inline-block;
}
#product-image {
width: 400px;
height: 40%;
min-width: 40%;
min-height: 40%;
padding: 20px;
}
.product-info {
display: inline-block;
padding: 10px;
margin: 10px;
}
#product-name {
font-size: 25px;
text-transform: uppercase;
text-align: left;
}
#product-price {
font-size: 20px;
padding: 20px 0px;
text-align: left;
}
.product-info hr {
width: 278px;
opacity: 0.4;
}
#product-sizes {
padding: 5px;
text-align: center;
text-transform: uppercase;
width: fit-content;
}
#size-radio-btn {
display: inline-block;
width: 40px;
height: 40px;
text-align: center;
font-size: 15px;
border: 1px solid black;
margin: 5px 10px;
margin-left: 5px;
margin-right: 5px;
line-height: 40px;
color: black;
cursor: pointer;
}
#add-to-cart {
width: 278px;
height: 40px;
margin: 0 5px;
cursor: pointer;
background-color: black;
color: white;
text-transform: uppercase;
font-size: 15px;
}
.product {
display: flex;
align-items: center;
justify-content: center;
}
#product-image {
max-width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="content">
<div class="product">
<div class="product-view">
<img id="product-image" src="https://dummyimage.com/800/000/fff">
</div>
<div class="product-info">
<div id="product-name">
<h3>Hoodie - Black</h3>
</div>
<div id="product-price">
<p>$80.00</p>
</div>
<hr>
<div id="product-sizes">
<label for="size-select">Size</label>
<div id="size-select">
<input type="radio" name="size" value="s" hidden id="s-size">
<label for="s-size" id="size-radio-btn">S</label>
<input type="radio" name="size" value="m" hidden id="m-size">
<label for="m-size" id="size-radio-btn">M</label>
<input type="radio" name="size" value="l" hidden id="l-size">
<label for="l-size" id="size-radio-btn">L</label>
<input type="radio" name="size" value="xl" hidden id="xl-size">
<label for="xl-size" id="size-radio-btn">XL</label>
<input type="radio" name="size" value="xxl" hidden id="xxl-size">
<label for="xxl-size" id="size-radio-btn">XXL</label>
</div>
</div>
<button type="button" id="add-to-cart">Add to Cart</button>
</div>
</div>
</div>
</body>
</html>
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/454083.html