如何将菜单放在网站的右侧？
[英]How do I place my menu on the right side of my website?
问题描述
I have a gallery website and I'm trying to make a menu on the right of the screen, however the menu items are on the bottom of the images, rather to the right of them.
我有一个画廊网站，我正在尝试在屏幕右侧制作一个菜单，但是菜单项位于图像的底部，而不是图像的右侧。 Regardless of where I set the width in classes gallerymenu, and menutyle, the menu items still remain below the images.无论我在gallerymenu 和menutyle 类中的何处设置宽度，菜单项仍然保留在图像下方。 How would I accomplish what I want to do?我将如何完成我想做的事情？
<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/ https://jsfiddle.net/ud3rfm2o/1/
3 个解决方案
解决方案1
0 2020-03-28 21:38:48
try float: right;尝试float: right; on galleryMenu :在galleryMenu ：
.galleryMenu {
height: 30%;
float: right;
}
解决方案2
0 2020-03-28 21:43:54
use flex:使用弹性：
<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;
}
for a full guide on flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/有关 flex 的完整指南： https : //css-tricks.com/snippets/css/a-guide-to-flexbox/
解决方案3
0 已采纳 2020-03-28 21:57:31
The easiest way to fix your code is to use float:left on the pictures and float:right on the menu.修复代码的最简单方法是在图片上使用 float:left 并在菜单上使用 float:right。 also give width to menu lt 40% and margin-top 40px to align tops.还为菜单 lt 40% 和 margin-top 40px 提供宽度以对齐顶部。
That said, flexbox is generally easier to work with.也就是说，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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.