如何以网格格式将 div 彼此相邻放置
[英]How can i place divs next to each other in grid format
问题描述
Hello as shown in the picture there are 2 divs which i want to place next to each other.
您好，如图所示，我想将 2 个 div 并排放置。 They are box1 and box2 respectivly.它们分别是 box1 和 box2。 In the pic they both have martial arts system and a name.在图片中，他们都有武功系统和名字。 How can i do this?我怎样才能做到这一点？ . . Below is the html and css code i have used.下面是我使用的 html 和 css 代码。
* { margin: 0px; padding: 0px; justify-content: center }.navlist { list-style: none; display: flex; padding: 0px; margin: 0px auto; width: 477px; top: 45px; position: relative; }.bar { height: 100px; justify-content: center; box-shadow: 0px 2px 5px; display: grid; grid-template-columns: 100px auto 80px; height: 100px; width: 100% }.link1 { margin-left: 30px; text-decoration: none; color: black; font-size: 20px }.signin { background: blue; height: 35px; width: 100px; left: 50px; position: relative; text-align: center; font-size: 18px; border-radius: 15%; top: 20px }.sign { top: 15%; position: relative; color: white; text-decoration: none }.pic { position: relative; left: -100px; width: 100%; height: 75% }.introbox { width: 700px; height: 200px; background-image: url('wal.jpg'); opacity: 0.75; left: 25%; position: relative; background-position: center; top: 10px; border-radius: 5px; font-weight: 600; box-shadow: 0px 2px 5px; }.new { font-size: 30px; left: 20%; position: relative; font-weight: 400 }.box1 { height: 250px; width: 200px; background: green; position: relative; left: 20%; top: 2%; display: grid; font-size: 20px; font-weight: 600 }.rank { font-weight: 100 }.box1:hover {}.lnlink { text-decoration: none; color: black }.box2 { height: 250px; width: 200px; background: green; position: relative; left: 40%; top: 1%; display: grid; font-size: 20px; font-weight: 600 }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link href="style.css" rel="stylesheet" type="text/css" /> <title></title> </head> <body> <div class="bar"> <img src="background?png" class="pic"> <nav> <ul class="navlist"> <li><a href='#' class="link1">Search</a></li> <li><a href='#' class="link1">Browse</a></li> <li><a href='#' class="link1">Tags</a></li> <li><a href='#' class="link1">Filter</a></li> <li><a href='#' class="link1">Dev</a></li> </ul> </nav> <div class="signin"><a href="#" class='sign'>Sign In</a></div> </div> <div class="introbox"> <h1>Read Light Novel & Web Novel Translations Online For FREE,</h1> <p2>Your fictional stories hub</p2> <br> <p3>Looking for a great place to read Light Novels. Light Novel Pub is a very special platform where you can read the translated versions of world famous Japanese. Chinese and Korean light novels in English. Every new chapters published by the author is updated instantly on the Light Novel Pub and notification service is provided to the readers. </p3> Start reading now to explore this mysterious fantasy world. </div> <br> <br> <div class="release"> <div class="title1"> <h3 class="new">New Ongoing Release</h3> </div> <div class="lightnovel1"> <div class="box1"> <img src="martialart.jpg" class="pic2"> <a href="#" class="lnlink">Martial Art System </a> <div class="rank"> <p2> Rank 1<p2> </div> </div> <div class="box2"> <img src="martialart.jpg" class="pic2"> <a href="#" class="lnlink2">Martial Art System </a> <div class="rank"> <p2> Rank 1<p2> </div> </div> </div> </div> </body> </html>
3 个解决方案
解决方案1
1 2022-01-11 07:13:54
If you want to really utilize the grid format you should use display: grid;如果你想真正使用grid格式，你应该使用display: grid; . . Especially in your case where there'll be multiple items that you will be adding to your div .特别是在您将要添加到div的多个项目的情况下。 Setting grid-template-columns will set how many columns you can have in a row and it'll automatically add the next item that exceeded your number of columns in the next row.设置grid-template-columns将设置您可以在一行中拥有多少列，它会自动添加下一行超过您的列数的下一个项目。 You can read more about grid in this link .您可以在此链接中阅读有关网格的更多信息。
PS. PS。 I read my light novels on that website too lol!我也在那个网站上读过我的轻小说，哈哈！
* { margin: 0px; padding: 0px; justify-content: center }.navlist { list-style: none; display: flex; padding: 0px; margin: 0px auto; width: 477px; top: 45px; position: relative; }.bar { height: 100px; justify-content: center; box-shadow: 0px 2px 5px; display: grid; grid-template-columns: 100px auto 80px; height: 100px; width: 100% }.link1 { margin-left: 30px; text-decoration: none; color: black; font-size: 20px }.signin { background: blue; height: 35px; width: 100px; left: 50px; position: relative; text-align: center; font-size: 18px; border-radius: 15%; top: 20px }.sign { top: 15%; position: relative; color: white; text-decoration: none }.pic { position: relative; left: -100px; width: 100%; height: 75% }.introbox { width: 700px; height: 200px; background-image: url('wal.jpg'); opacity: 0.75; left: 25%; position: relative; background-position: center; top: 10px; border-radius: 5px; font-weight: 600; box-shadow: 0px 2px 5px; }.new { font-size: 30px; left: 20%; position: relative; font-weight: 400 }.box1 { height: 250px; width: 200px; background: green; position: relative; left: 20%; top: 2%; display: grid; font-size: 20px; font-weight: 600 }.rank { font-weight: 100 }.box1:hover {}.lnlink { text-decoration: none; color: black }.box2 { height: 250px; width: 200px; background: green; position: relative; left: 40%; top: 1%; display: grid; font-size: 20px; font-weight: 600 }.lightnovel1{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link href="style.css" rel="stylesheet" type="text/css" /> <title></title> </head> <body> <div class="bar"> <img src="background?png" class="pic"> <nav> <ul class="navlist"> <li><a href='#' class="link1">Search</a></li> <li><a href='#' class="link1">Browse</a></li> <li><a href='#' class="link1">Tags</a></li> <li><a href='#' class="link1">Filter</a></li> <li><a href='#' class="link1">Dev</a></li> </ul> </nav> <div class="signin"><a href="#" class='sign'>Sign In</a></div> </div> <div class="introbox"> <h1>Read Light Novel & Web Novel Translations Online For FREE,</h1> <p2>Your fictional stories hub</p2> <br> <p3>Looking for a great place to read Light Novels. Light Novel Pub is a very special platform where you can read the translated versions of world famous Japanese. Chinese and Korean light novels in English. Every new chapters published by the author is updated instantly on the Light Novel Pub and notification service is provided to the readers. </p3> Start reading now to explore this mysterious fantasy world. </div> <br> <br> <div class="release"> <div class="title1"> <h3 class="new">New Ongoing Release</h3> </div> <div class="lightnovel1"> <div class="box1"> <img src="martialart.jpg" class="pic2"> <a href="#" class="lnlink">Martial Art System </a> <div class="rank"> <p2> Rank 1 <p2> </div> </div> <div class="box2"> <img src="martialart.jpg" class="pic2"> <a href="#" class="lnlink2">Martial Art System </a> <div class="rank"> <p2> Rank 1 <p2> </div> </div> </div> </div> </body> </html>
解决方案2
0 2022-01-11 06:53:57
* { margin: 0px; padding: 0px; justify-content: center }.navlist { list-style: none; display: flex; padding: 0px; margin: 0px auto; width: 477px; top: 45px; position: relative; }.bar { height: 100px; justify-content: center; box-shadow: 0px 2px 5px; display: grid; grid-template-columns: 100px auto 80px; height: 100px; width: 100% }.link1 { margin-left: 30px; text-decoration: none; color: black; font-size: 20px }.signin { background: blue; height: 35px; width: 100px; left: 50px; position: relative; text-align: center; font-size: 18px; border-radius: 15%; top: 20px }.sign { top: 15%; position: relative; color: white; text-decoration: none }.pic { position: relative; left: -100px; width: 100%; height: 75% }.introbox { width: 700px; height: 200px; background-image: url('wal.jpg'); opacity: 0.75; left: 25%; position: relative; background-position: center; top: 10px; border-radius: 5px; font-weight: 600; box-shadow: 0px 2px 5px; }.new { font-size: 30px; left: 20%; position: relative; font-weight: 400 }.box1 { height: 250px; width: 200px; background: green; position: relative; left: 20%; top: 2%; display: grid; font-size: 20px; font-weight: 600 }.rank { font-weight: 100 }.box1:hover {}.lnlink { text-decoration: none; color: black }.box2 { height: 250px; width: 200px; background: green; position: relative; left: 40%; top: 1%; display: grid; font-size: 20px; font-weight: 600 }.lightnovel1{ display: flex; flex-direction:row; justify-content:flex-start;
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link href="style.css" rel="stylesheet" type="text/css" /> <title></title> </head> <body> <div class="bar"> <img src="background?png" class="pic"> <nav> <ul class="navlist"> <li><a href='#' class="link1">Search</a></li> <li><a href='#' class="link1">Browse</a></li> <li><a href='#' class="link1">Tags</a></li> <li><a href='#' class="link1">Filter</a></li> <li><a href='#' class="link1">Dev</a></li> </ul> </nav> <div class="signin"><a href="#" class='sign'>Sign In</a></div> </div> <div class="introbox"> <h1>Read Light Novel & Web Novel Translations Online For FREE,</h1> <p2>Your fictional stories hub</p2> <br> <p3>Looking for a great place to read Light Novels. Light Novel Pub is a very special platform where you can read the translated versions of world famous Japanese. Chinese and Korean light novels in English. Every new chapters published by the author is updated instantly on the Light Novel Pub and notification service is provided to the readers. </p3> Start reading now to explore this mysterious fantasy world. </div> <br> <br> <div class="release"> <div class="title1"> <h3 class="new">New Ongoing Release</h3> </div> <div class="lightnovel1"> <div class="box1"> <img src="martialart.jpg" class="pic2"> <a href="#" class="lnlink">Martial Art System </a> <div class="rank"> <p2> Rank 1<p2> </div> </div> <div class="box2"> <img src="martialart.jpg" class="pic2"> <a href="#" class="lnlink2">Martial Art System </a> <div class="rank"> <p2> Rank 1<p2> </div> </div> </div> </div> </body> </html>
解决方案3
0 2022-01-11 06:57:00
There are many ways to achieve it, consider using flex .有很多方法可以实现，考虑使用flex 。 You need to adjust to position , top , left of box1 and box2 to put where you want to put.您需要调整到position ， box1和box2的top ， left以放置您想要放置的位置。
.lightnovel1 {
display: flex;
justify-content: flex-start;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何将两个 div 并排放置？ - How to place two divs next to each other?
如何将两个div彼此相邻放置？ - How to place two divs next to each other?
如何将两个 div 并排放置？ - how to place both divs next to each other?
如何使用Bootstrap在单独的div中将两个按钮彼此相邻放置？ - How can I place 2 buttons next to each other in separate divs with bootstrap?
如何使2个div彼此相邻？ - How can I make 2 divs be next to each other?
我怎样才能把我的 div 放在一起？ - How can I put my divs next to each other?
我想用背景颜色将 3 个 div 并排放置 - I want to place 3 divs next to each other with a background color
为什么我不能将我的 div 放在一起 - Why cant i place my divs next to each other
如何将2个iframe彼此相邻放置？ - How can I place 2 iframes next to each other?
如何在HTML中将3个对象彼此相邻放置 - How can I place 3 objects next to each other in HTML
相关标签