将图像和Div元素彼此相邻放置？

Question

Working on a page for my website and I'm trying to set up a series of profiles side-by-side. 在处理我网站的页面时，我正在尝试并排设置一系列配置文件。 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. 这个想法是，概要文件的图像将是外部链接，但是我希望每个小块概要文件可以并排放置。 I'm fairly uncertain of how to do this, ass I thought fixing the padding and adding inline to the blocks themselves would stack them side by side. 我不确定如何做到这一点，屁股我认为固定填充并向块本身添加内联会并排堆叠它们。 Help? 救命？

 .Head, .Welcome { padding-left: 300px; margin-right: 150px; } .body { padding-left: 300px; margin-right: 150px; } .img.center { display: block; margin: 0 auto; } ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #d9d9d9; height: 100%; position: fixed; display: inline-block; } li { text-align: center; border-bottom: 1px solid #555; } #pagename { text-align: center; font-family: "Arial" } li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; font-family: "Arial" } .active { background-color: #990000; color: white; } li a:hover { background-color: #990000 color: white; } #titletext { text-align: center; font-family: "Arial"; font-size: 50; } /*GAR PROFILE*/ .Gar{ padding-left: 300px; } .gar-block1{ background-color: #990000; color: white; font-family: "Arial"; text-decoration: none; text-align: center; width: 250px; padding: 20px; } .gar-block2{ background-color: #d9d9d9; color: black; font-family:"Arial"; text-decoration: none; width: 250px; height: 300px; padding: 20px; } /*MAYU PROFILE*/ .Mayu{ padding-left: 750px; display: in-line; } .mayu-block1{ background-color: #990000; color: white; font-family: "Arial"; text-decoration: none; text-align: center; width: 250px; padding: 20px; display: in-line; } .mayu-block2{ background-color: #d9d9d9; color: black; font-family:"Arial"; text-decoration: none; width: 250px; height: 300px; padding: 20px; display: in-line; }

 <!doctype html> <html> <!--HEAD INFORMATION--> <head> <link rel="stylesheet" type="text/css" href="CHARACTER_PAGE.css"> <title>FFXIV RP Database</title> <style> div.head { background-color: #000000; color: white; text-decoration: none; margin: 5px 0 5px 0; padding: 20px; } </style> </head> <!--END: HEAD INFORMATION--> <body> <!--NAVIGATION BAR--> <div class="Navigation"> <ul> <li id="first"><img src="xiv logo.png" width="200px"></li> <li><a href="home.html">Home</a></li> <li><a href="characters.html" class="active">Characters</a></li> <li><a href="story.html">Story</a></li> <li><a href="stats.html">Stats</a></li> <li><a href=".html">Contact</a><li> </ul> </div> <!--END: NAVIGATION BAR--> <!--HEADER--> <div class="head"> <h1 id="titletext">FFXIV RP Database</h1> </div> <!--END: HEADER--> <!--BELOW HEAD CONTENT--> <div class="Characters"> <p> <h2 id="pagename">Characters</h2> <p> </div> <!--CHARACTER PROFILE: GAR--> <div class="Gar"> <p> <a href="https://charahub.com/character/1024524/Gar"><img id="garprofile" src="Gar.png" height="290px"></a> <div class="gar-block1"><h3>"Gar"</h3></div> <div class="gar-block2"> <p><b>Age:</b> 30</p> <p><b>Height:</b> 5'11"</p> <p><b>Job:</b> Dark Knight</p> <p><b>Role:</b> Tank</p> <p><b>Family:</b> Unknown mother and father (estranged)</p> <p><b>Significant Other:</b> Mayumi Mori</p> </p> <!--CHARACTER PROFILE: MAYU--> <div class="Mayu"> <p> <aside> <a href="https://charahub.com/character/1024524/Gar"><img id="garprofile" src="Mayumi.png" height="290px"></a> <div class="mayu-block1"><h3>Mayumi Mori</h3></div> <div class="mayu-block2"> <p><b>Age:</b> 23</p> <p><b>Height:</b> 4'8"</p> <p><b>Job:</b> Astrologian</p> <p><b>Role:</b> Healer</p> <p><b>Family:</b> Junko Mori (Dead) and Khaguran (Unknown)</p> <p><b>Significant Other:</b> Gar</p> </aside> </p> </body> </html>

Answer 1

Use float:left; 使用float：left; in your css style sheets. 在您的CSS样式表中。

#a{
float:left;
}
#b{
float:left;
}

this two divs whith id : a , b will be side by side but you need to use clear:both; 这两个div的id是：a，b并排，但是您需要使用clear：both; in next div;Remember about closing tags .I hope it helps 在下一个div；记住关闭标签。希望对您有所帮助

Answer 2

I'm not sure if i can understand you well here but did you mean that you want the profile to be centered? 我不确定在这里我是否能很好地理解您，但是您是不是想让个人资料居中？

If this is the case, i already made it for you. 如果是这样，我已经为您做到了。

Please also check your html code, there are lots of missing </> close tag 另请检查您的html代码，缺少许多</>关闭标记

I also edit some of your codes, please check the codes below both HTML and CSS. 我还会编辑您的一些代码，请检查HTML和CSS下方的代码。

Since .Gar and .Mayu are same layout, i made the css layout of it in one class profile display both container inline-block 由于.Gar和.Mayu是相同的布局，因此我在一个类profile中使它的css布局显示了两个容器inline-block

Hope it helps. 希望能帮助到你。

  div.head { background-color: #000000; color: white; text-decoration: none; margin: 5px 0 5px 0; padding: 20px; } .Head, .Welcome { padding-left: 300px; margin-right: 150px; } .body { padding-left: 300px; margin-right: 150px; } .img .center { display: block; margin: 0 auto; } ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #d9d9d9; height: 100%; position: fixed; display: inline-block; } li { text-align: center; border-bottom: 1px solid #555; } #pagename { text-align: center; font-family: "Arial" } li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; font-family: "Arial" } .active { background-color: #990000; color: white; } li a:hover { background-color: #990000 color: white; } #titletext { text-align: center; font-family: "Arial"; font-size: 50; } /*GAR PROFILE*/ .profile { margin-left: 300px; display: inline-block; margin-bottom: 100px; } .block1 { background-color: #990000; color: white; font-family: "Arial"; text-decoration: none; text-align: center; width: 250px; padding: 20px; } .block2 { background-color: #d9d9d9; color: black; font-family: "Arial"; text-decoration: none; width: 250px; height: 300px; padding: 20px; }

 <!--NAVIGATION BAR--> <div class="Navigation"> <ul> <li id="first"><img src="xiv logo.png" width="200px"></li> <li><a href="home.html">Home</a></li> <li><a href="characters.html" class="active">Characters</a></li> <li><a href="story.html">Story</a></li> <li><a href="stats.html">Stats</a></li> <li><a href=".html">Contact</a></li> </ul> </div> <!--END: NAVIGATION BAR--> <!--HEADER--> <div class="head"> <h1 id="titletext">FFXIV RP Database</h1> </div> <!--END: HEADER--> <!--BELOW HEAD CONTENT--> <div class="Characters"> <p> <h2 id="pagename">Characters</h2> </p> </div> <!--CHARACTER PROFILE: GAR--> <div class="profile Gar"> <p> <a href="https://charahub.com/character/1024524/Gar"><img id="garprofile" src="Gar.png" height="290px"></a> <div class="block1"> <h3>"Gar"</h3> </div> <div class="block2"> <p><b>Age:</b> 30</p> <p><b>Height:</b> 5'11"</p> <p><b>Job:</b> Dark Knight</p> <p><b>Role:</b> Tank</p> <p><b>Family:</b> Unknown mother and father (estranged)</p> <p><b>Significant Other:</b> Mayumi Mori</p> </div> </p> </div> <!--CHARACTER PROFILE: MAYU--> <div class="profile Mayu"> <p> <aside> <a href="https://charahub.com/character/1024524/Gar"><img id="garprofile" src="Mayumi.png" height="290px"></a> <div class="block1"> <h3>Mayumi Mori</h3> </div> <div class="block2"> <p><b>Age:</b> 23</p> <p><b>Height:</b> 4'8"</p> <p><b>Job:</b> Astrologian</p> <p><b>Role:</b> Healer</p> <p><b>Family:</b> Junko Mori (Dead) and Khaguran (Unknown)</p> <p><b>Significant Other:</b> Gar</p> </div> </aside> </p> </div>

将图像和Div元素彼此相邻放置？

问题描述

2 个解决方案

解决方案1
0 2017-04-11 16:07:34

解决方案2
0 已采纳 2017-04-11 16:15:03

将图像和Div元素彼此相邻放置？

问题描述

2 个解决方案

解决方案1 0 2017-04-11 16:07:34

解决方案2 0 已采纳 2017-04-11 16:15:03

解决方案1
0 2017-04-11 16:07:34

解决方案2
0 已采纳 2017-04-11 16:15:03