-1
我有一個市場類型的頁面即時通訊工作,但我似乎無法得到產品(div元素)的響應。調整窗口大小或在手機上查看窗口看起來很糟糕。我在這裏做錯了什麼?如何讓這些div元素響應?
<div class="productlayout">
<div class="products">
<div id="col-1">
<img src="originallogo.png">
<hr class="lineunderproduct">
<h3 class="title1">Official Mens T-Shirt</h3>
<h4 class="price1">$49.99</h4>
<button class="btn btn-5 btn-5a glyphicon glyphicon-shopping-cart"><span>Purchase</span></button>
</div>
<div id="col-2">
<img src="originallogo.png">
<hr class="lineunderproduct">
<h3 class="title2">Mens Tank</h3>
<h4 class="price2">$29.99</h4>
<button class="btn btn-5 btn-5a glyphicon glyphicon-shopping-cart"><span>Purchase</span></button>
</div>
<div id="col-3">
<img src="originallogo.png">
<hr class="lineunderproduct">
<h3 class="title3">Mens Sweatpants</h3>
<h4 class="price3">$49.99</h4>
<button class="btn btn-5 btn-5a glyphicon glyphicon-shopping-cart"><span>Purchase</span></button>
</div>
</div>
</div>
CSS
.productlayout {
display: flex;
flex-direction: row;
height: 500px;
}
.products {
display: flex;
flex-grow: 1;
background-color: #c7c4c4;
margin: 0px 40px;
justify-content: space-around;
padding: 30px 0px;
}
#col-1 {
background: #1d1d1d;
width: 320px;
order: 1;
box-shadow: 0px 0px 1px 1px #000;
}
#col-1 img { /*Product Image placement settings */
width: 75%;
display: block;
margin: 20px auto 0 auto;
}
#col-2 {
background: #1d1d1d;
width: 320px;
order: 2;
box-shadow: 0px 0px 1px 1px #000;
}
#col-2 img { /*Product Image placement settings */
width: 75%;
display: block;
margin: 20px auto 0 auto;
}
#col-3 {
background: #1d1d1d;
width: 320px;
order: 3;
box-shadow: 0px 0px 1px 1px #000;
}
#col-3 img { /*Product Image placement settings */
width: 75%;
display: block;
margin: 20px auto 0 auto;
}
.lineunderproduct {
width: 75%;
margin: 0 auto;
margin-top: 20px;
}
.title1 {
color: #e0dcdc;
text-align: center;
font-size: 20px;
font-family: 'Droid Serif', serif;
}
.title2 {
color: #e0dcdc;
text-align: center;
font-size: 20px;
font-family: 'Droid Serif', serif;
}
.title3 {
color: #e0dcdc;
text-align: center;
font-size: 20px;
font-family: 'Droid Serif', serif;
}
.price1 {
color: #959393;
font-family: 'Droid Serif', serif;
font-size: 15px;
text-align: center;
font-style: italic;
}
.price2 {
color: #959393;
font-family: 'Droid Serif', serif;
font-size: 15px;
text-align: center;
font-style: italic;
}
.price3 {
color: #959393;
font-family: 'Droid Serif', serif;
font-size: 15px;
text-align: center;
font-style: italic;
}
/* Add to Cart Buttons */
.btn {
border: none;
font-family: 'Droid Serif', serif;
font-size: 20px;
color: #1d1d1d;
background: none;
cursor: pointer;
padding: 20px 80px;
display: inline-block;
margin: 15px 30px;
text-transform: uppercase;
letter-spacing: none;
outline: none;
position: relative;
box-shadow: 0px 0px 0px 3px #D4AF37;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn:after {
content: '';
position: absolute;
z-index: -1;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn-5 {
background: #fff;
color: #1d1d1d;
height: 40px;
min-width: 260px;
line-height: 30px;
font-size: 20px;
overflow: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.btn-5:active {
background: #9053a9;
top: 2px;
}
.btn-5 span {
display: inline-block;
letter-spacing: 0.1px;
width: 100%;
height: 100%;
-webkit-transition: all 0.3s;
-webkit-backface-visibility: hidden;
-moz-transition: all 0.3s;
-moz-backface-visibility: hidden;
transition: all 0.3s;
backface-visibility: hidden;
}
.btn-5:before {
position: absolute;
height: 100%;
width: 100%;
line-height: 1.5;
font-size: 180%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn-5:active:before {
color: #703b87;
}
/* Button 5a */
.btn-5a:hover span {
-webkit-transform: translateY(300%);
-moz-transform: translateY(300%);
-ms-transform: translateY(300%);
transform: translateY(300%);
}
.btn-5a:before {
left: 0;
top: -100%;
}
.btn-5a:hover:before {
top: 0;
/* Hover backgorund change background-color: #308014; */
}
@media (max-width: 800px) {
.products {
flex-direction: column;
}
定義*看起來很可怕*。 **期望的**顯示是什麼?值得注意的是,唯一的媒體查詢是'flex-direction:column',如果沒有'display:flex',它就什麼也不做。嘗試將其添加到媒體查詢中,或將其他更改添加到媒體查詢以更改移動顯示。 –
@ObsidianAge我試圖獲得1x3產品展示。每行3個,當看到一個較小的屏幕時,我希望它變成3x1。 – krownfit