您好，如圖所示，我想將 2 個 div 并排放置。它們分別是 box1 和 box2 。圖中他們都有武功系統和名字。我怎樣才能做到這一點？. 下面是我使用的 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>uj5u.com熱心網友回復：
如果你想真正使用grid你應該使用的格式display: grid;。特別是在您的情況下，您將添加多個專案到您的div. 設定grid-template-columns將設定您可以在一行中擁有多少列，并且它會自動添加下一行超過您的列數的下一個專案。您可以在此鏈接中閱讀有關網格的更多資訊。
PS。我也在那個網站上讀過我的輕小說，哈哈！
* {
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>uj5u.com熱心網友回復：
* {
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>uj5u.com熱心網友回復：
有很多方法可以實作它，考慮使用flex. 您需要調整到position, top, leftofbox1和box2放置您想放置的位置。
.lightnovel1 {
display: flex;
justify-content: flex-start;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/408412.html
標籤：
上一篇：搜索串列或過濾器串列