0
在我的網站的頁面上工作，我試圖建立一系列的配置文件並排。 The idea is that the images of the profiles will be external links, but I would like each small block profile to be side by side. 我相當不確定如何做到這一點，屁股我認爲固定填充和添加內嵌塊自己將堆疊他們並排。幫幫我？放置圖像和Div元素相鄰？
.Head, .Welcome {
padding-left: 300px;
\t margin-right: 150px;
}
.body {
padding-left: 300px;
\t margin-right: 150px;
}
.img.center {
\t display: block;
\t margin: 0 auto;
}
ul {
\t list-style-type: none;
\t margin: 0;
\t padding: 0;
\t width: 200px;
\t background-color: #d9d9d9;
\t height: 100%;
\t position: fixed;
\t display: inline-block;
}
li {
\t text-align: center;
\t border-bottom: 1px solid #555;
}
#pagename {
\t text-align: center;
\t font-family: "Arial"
}
li a {
\t display: block;
\t color: #000;
\t padding: 8px 16px;
\t text-decoration: none;
\t font-family: "Arial"
}
.active {
\t background-color: #990000;
\t color: white;
}
li a:hover {
\t background-color: #990000
\t color: white;
}
#titletext {
\t text-align: center;
\t font-family: "Arial";
\t font-size: 50;
}
/*GAR PROFILE*/
.Gar{
\t padding-left: 300px;
}
.gar-block1{
\t background-color: #990000;
\t color: white;
\t font-family: "Arial";
\t text-decoration: none;
\t text-align: center;
\t width: 250px;
\t padding: 20px;
}
.gar-block2{
\t background-color: #d9d9d9;
\t color: black;
\t font-family:"Arial";
\t text-decoration: none;
\t width: 250px;
\t height: 300px;
\t padding: 20px;
}
/*MAYU PROFILE*/
.Mayu{
\t padding-left: 750px;
\t display: in-line;
}
.mayu-block1{
\t background-color: #990000;
\t color: white;
\t font-family: "Arial";
\t text-decoration: none;
\t text-align: center;
\t width: 250px;
\t padding: 20px;
\t display: in-line;
}
.mayu-block2{
\t background-color: #d9d9d9;
\t color: black;
\t font-family:"Arial";
\t text-decoration: none;
\t width: 250px;
\t height: 300px;
\t padding: 20px;
\t display: in-line;
}<!doctype html>
\t <html>
<!--HEAD INFORMATION-->
\t <head>
\t \t <link rel="stylesheet" type="text/css" href="CHARACTER_PAGE.css">
\t \t <title>FFXIV RP Database</title>
\t \t <style>
\t \t \t div.head {
\t \t \t \t background-color: #000000;
\t \t \t \t color: white;
\t \t \t \t text-decoration: none;
\t \t \t \t margin: 5px 0 5px 0;
\t \t \t \t padding: 20px;
\t \t \t }
\t \t </style>
\t </head>
<!--END: HEAD INFORMATION-->
\t
\t <body>
<!--NAVIGATION BAR-->
\t \t <div class="Navigation">
\t \t \t <ul>
\t \t \t \t <li id="first"><img src="xiv logo.png" width="200px"></li>
\t \t \t \t <li><a href="home.html">Home</a></li>
\t \t \t \t <li><a href="characters.html" class="active">Characters</a></li>
\t \t \t \t <li><a href="story.html">Story</a></li>
\t \t \t \t <li><a href="stats.html">Stats</a></li>
\t \t \t \t <li><a href=".html">Contact</a><li>
\t \t \t </ul>
\t \t </div>
<!--END: NAVIGATION BAR-->
<!--HEADER-->
\t \t <div class="head">
\t \t \t <h1 id="titletext">FFXIV RP Database</h1>
\t \t </div>
<!--END: HEADER-->
<!--BELOW HEAD CONTENT-->
\t \t <div class="Characters">
\t \t \t <p>
\t \t \t \t <h2 id="pagename">Characters</h2>
\t \t \t \t <p>
\t \t </div>
\t
<!--CHARACTER PROFILE: GAR-->
\t <div class="Gar">
\t \t <p>
\t \t \t <a href="https://charahub.com/character/1024524/Gar"><img id="garprofile" src="Gar.png" height="290px"></a>
\t \t \t \t <div class="gar-block1"><h3>"Gar"</h3></div>
\t \t \t \t <div class="gar-block2">
\t \t \t \t \t <p><b>Age:</b> 30</p>
\t \t \t \t \t <p><b>Height:</b> 5'11"</p>
\t \t \t \t \t <p><b>Job:</b> Dark Knight</p>
\t \t \t \t \t <p><b>Role:</b> Tank</p>
\t \t \t \t \t <p><b>Family:</b> Unknown mother and father (estranged)</p>
\t \t \t \t \t <p><b>Significant Other:</b> Mayumi Mori</p>
\t </p>
<!--CHARACTER PROFILE: MAYU-->
\t <div class="Mayu">
\t \t <p>
\t \t <aside>
\t \t \t <a href="https://charahub.com/character/1024524/Gar"><img id="garprofile" src="Mayumi.png" height="290px"></a>
\t \t \t \t <div class="mayu-block1"><h3>Mayumi Mori</h3></div>
\t \t \t \t <div class="mayu-block2">
\t \t \t \t \t <p><b>Age:</b> 23</p>
\t \t \t \t \t <p><b>Height:</b> 4'8"</p>
\t \t \t \t \t <p><b>Job:</b> Astrologian</p>
\t \t \t \t \t <p><b>Role:</b> Healer</p>
\t \t \t \t \t <p><b>Family:</b> Junko Mori (Dead) and Khaguran (Unknown)</p>
\t \t \t \t \t <p><b>Significant Other:</b> Gar</p>
\t \t </aside>
\t \t </p>
\t </body>
</html>
你的HTML是非常無效的。你錯過了一堆結束標籤，在'p'中有元素不應該在那裏。你應該通過[驗證器]（https://validator.w3.org/）運行這段代碼，修正錯誤，然後看看你能否弄明白。你也可以[驗證你的CSS]（https://jigsaw.w3.org/css-validator/）。例如，這會告訴你，'display：in-line;'無效 - 它是'display：inline'。在解決佈局問題之前，需要修復HTML。 –