我有一個畫廊網站，我試圖在屏幕右側創建一個菜單，但是菜單項位于圖像的底部，而不是圖像的右側。無論我在 gallerymenu 和 menutyle 類中的何處設置寬度，菜單項仍然保留在圖像下方。我該如何完成我想做的事？<body class="galleryStyle"> <div class="galleryGrid"> <div class="galleryContainer"> <div> <a href="google.com.html"> <img src="https://upload.wikimedia.org/wikipedia/en/2/23/Philipgiaccone1.JPG" alt="google"> </a> </div> </div> <div class="galleryContainer"> <div> <a href="google.com.html"> <img src="https://upload.wikimedia.org/wikipedia/commons/1/19/Delfini-Milian_cropped.png" alt="google"> </a> </div> </div> </div><div class="galleryMenu"> <div class="menuStyle"> <a href="google.com"> <p>google</p></a> </div> <div class="menuStyle"> <a href="google.com"> <p>google</p></a> </div>.galleryStyle { color: grey; width: 100%; background: white;}.galleryContainer { height: auto; width: 15%; margin: 10px; padding: 15px;}.galleryGrid { display: grid; grid-template-columns: repeat(2, 8fr); padding: 5px; margin: 10px; height: 100%; width: 60%;}.galleryMenu { height: 30%;}.menuContainer>div { font-size: 2vw; text-align: center; border-radius: 5px; box-shadow: 8px 13px black; margin: 50px; height: 50%; width: 40%;}.menuStyle { display: flex; align-items: center; justify-content: center; background: red; margin: 10px;}https://jsfiddle.net/ud3rfm2o/1/
3 回答
長風秋雁
TA貢獻1757條經驗 獲得超7個贊
修復代碼的最簡單方法是在圖片上使用 float:left ，在菜單上使用 float:right 。還給菜單 lt 寬度 40% 和邊距頂部 40px 以對齊頂部。
也就是說，Flexbox 通常更容易使用。
.galleryStyle {
color: grey;
width: 100%;
background: white;
}
.galleryContainer {
height: auto;
width: 15%;
margin: 10px;
padding: 15px;
}
.galleryGrid {
display: grid;
grid-template-columns: repeat(2, 8fr);
padding: 5px;
margin: 10px;
height: 100%;
width: 60%;
float:left;
}
.galleryMenu {
height: 30%;
}
.menuContainer>div {
font-size: 2vw;
text-align: center;
border-radius: 5px;
box-shadow: 8px 13px black;
margin: 50px;
height: 50%;
width: 40%;
}
.menuStyle {
display: flex;
align-items: center;
justify-content: center;
background: red;
margin: 10px;
width:25%;
float:right;
margin-top:40px;
}
<body class="galleryStyle">
<div class="galleryGrid">
<div class="galleryContainer">
<div>
<a href="google.com.html">
<img src="https://upload.wikimedia.org/wikipedia/en/2/23/Philipgiaccone1.JPG" alt="google">
</a>
</div>
</div>
<div class="galleryContainer">
<div>
<a href="google.com.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/1/19/Delfini-Milian_cropped.png" alt="google">
</a>
</div>
</div>
</div>
<div class="galleryMenu">
<div class="menuStyle">
<a href="google.com">
<p>google</p></a>
</div>
<div class="menuStyle">
<a href="google.com">
<p>google</p></a>
</div>
開心每一天1111
TA貢獻1836條經驗 獲得超13個贊
使用彈性：
? ? <body class="galleryStyle">
? ? <div class= gallery-wrap>
? ? ? ? <div class="galleryGrid">?
? ? ? ? ? <div class="galleryContainer">
? ? ? ? ? ? <div>
? ? ? ? ? ? ? <a href="google.com.html">
? ? ? ? ? ? ? ? <img src="https://upload.wikimedia.org/wikipedia/en/2/23/Philipgiaccone1.JPG" alt="google">
? ? ? ? ? ? ? </a>
? ? ? ? ? ? </div>
? ? ? ? ? </div>
? ? ? ? ? <div class="galleryContainer">
? ? ? ? ? ? <div>
? ? ? ? ? ? ? <a href="google.com.html">
? ? ? ? ? ? ? ? <img src="https://upload.wikimedia.org/wikipedia/commons/1/19/Delfini-Milian_cropped.png" alt="google">
? ? ? ? ? ? ? </a>
? ? ? ? ? ? </div>
? ? ? ? ? </div>
? ? ? ? ? </div>
? ? <div class="galleryMenu">
? ? ? ? <div class="menuStyle">
? ? ? ? ? <a href="google.com">
? ? ? ? ? ? <p>google</p></a>
? ? ? ? </div>
? ? ? ? <div class="menuStyle">
? ? ? ? ? <a href="google.com">
? ? ? ? ? ? <p>google</p></a>
? ? ? ? </div>
? ? ? ? </div>
.gallery-wrap{
? display:flex;
? flex-direction:row;
? ?justify-content:space-between;
}
.galleryStyle {
? color: grey;
? width: 100%;
? background: white;
}
.galleryContainer {
? height: auto;
? width: 15%;
? margin: 10px;
? padding: 15px;
}
.galleryGrid {
? display: grid;
? grid-template-columns: repeat(2, 8fr);
? padding: 5px;
? margin: 10px;
? height: 100%;
? width: 40%;
}
.galleryMenu? {
? height: 30%;
? flex-grow:1
}
.menuContainer>div {
? font-size: 2vw;
? text-align: center;
? border-radius: 5px;
? box-shadow: 8px 13px black;
? margin: 50px;
? height: 50%;
? width: 20%;
}
.menuStyle {
? display: flex;
? align-items: center;
? justify-content: center;
? background: red;
? margin: 10px;
}
- 3 回答
- 0 關注
- 153 瀏覽
添加回答
舉報
0/150
提交
取消