我有一个画廊网站，我正在尝试在屏幕右侧创建一个菜单，但是菜单项位于图像的底部，而不是图像的右侧。无论我在类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;
}
尝试浮动：正确；在图库菜单上
.galleryMenu {
height: 30%;
float: right;
}
使用flex：
<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;
}
有关flex的完整指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/