Html 如何使用 <div> 标签并排放置两个框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20296100/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to position two boxes side by side using <div> tags?
提问by Harish R
im learning HTML and CSS right now. Now im trying to create a simple Layout, HEADER below that a A MENU BAR and below that a NAVIGATION BAR in the right and MAIN SECTION in the right Im not able to place the navigation bar and the main section side by side.
我现在正在学习 HTML 和 CSS。现在我正在尝试创建一个简单的布局，标题下方是菜单栏，下方是右侧的导航栏和右侧的主部分，我无法将导航栏和主部分并排放置。
THE main section goes below the navigation bar and not on its side
主要部分位于导航栏下方而不是侧面
The code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<center>
<div style="height:70px; width:800px; background-color:red; color:white; font-size:30px" align="center">
<strong>WELCOME</strong>
</div>
<div style="height:30px; width:800px; background-color:blue; color:white; font-size:15px; top:80px" align="center">
<div style="width:200px; float:left">
<a href="">HOME</a>
</div>
<div style="width:200px; float:left">
<a href="C:\Users\Harish\Desktop\c prog.html">liwjoejlsn</a>
</div>
<div style="width:200px; float:left">
<a href="">lskdjflsd</a>
</div>
<div style="width:200px; float:left">
<a href="">ABOUT</a>
</div>
</div>
</center>
<center>
<div style="height:800px; width:800px; background-color:grey; color:white; font-size:10px; top:100px">
<div style="height:800px; width:200px; float:left; border-style:solid; border-width:2px;">
<ul>
<li>Hello</li>
<li>hey</li>
<li>who is</li>
<li>forgive</li>
</ul>
</div>
<div style="height:800px;width:600px; float:left; border-style:solid; border-width:2px; left:200px;">
<p>
lsjdgfio jsldfkslj;do fsmi;odfml dsijfo siuldhf iofj s dofus <br> klsjhdfioy oasdilufilh aoudsfk <br> ksajhkdfjhu aosls
</p>
</div>
</div>
</center>
</body>
</html>
回答by Josan Iracheta
If you want to have two divelements side by side you should use float:left;. As far as your code is concerned, you are using old code, such as centerand you should really start naming your divelements. It would also be better if you placed your css code on a separate file and called it from your html.
如果你想div并排放置两个元素，你应该使用float:left;. 就您的代码而言，您正在使用旧代码，例如center，您应该真正开始命名您的div元素。如果您将 css 代码放在一个单独的文件中并从您的 html 中调用它，那也会更好。
There's too much to cover from just one post, but I did write up some small demos so you can see how float:left;works. I also fixed your code so now you have the divs side by side.
仅仅一篇文章就涉及太多内容，但我确实写了一些小演示，以便您了解float:left;工作原理。我还修复了您的代码，因此现在您可以并排放置 div。
回答by mcmac
in this example you can use
在这个例子中，你可以使用
display: inline-block;
