Html 在另一个 div 中左右定位 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10355278/
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
Positioning divs left and right within anohter div
提问by RLoniello
I am quite new to css and html, and I am having trouble floating divs within a another div, I've done quite a bit of research online but have not been able to come up with a solution.
我对 css 和 html 很陌生，我在另一个 div 中浮动 div 时遇到了麻烦，我在网上做了很多研究，但一直没有找到解决方案。
these are the sites I have read and where of no use:
这些是我读过的网站，但没有用处：
barelyfitz /screencast/html-training/css/positioning/
勉强菲茨/screencast/html-training/css/positioning/
stackoverflow /questions/580195/css-layout-2-column-fixed-fluid
stackoverflow /questions/580195/css-layout-2-column-fixed-fluid
mirificampress /show.php?id=106
mirificampress /show.php?id=106
How to get Floating DIVs inside fixed-width DIV to continue horizontally?
My code can be found on jsFiddle here
我的代码可以在 jsFiddle 上找到
回答by KBN
I hope this will help. CSS:
我希望这将有所帮助。CSS：
#left, #right {
width: 100px; //change this to whatever required
float: left;
}
HTML :
HTML :
<div id="wrapper">
<div id="left">
<p class="t0">lorum itsum left</p>
<div>
<div id="right">
<p class="t0">lorum itsum right</p>
<div>
<div>
回答by Neyomal
Since you are a beginner. I will make it straight forward. Below is extraction of your code. I used internal style sheet. Your example you are using external style sheet. Using float attribute you can set it to left and right. Here is used float:left to alight one div to left and float:right to alight other one to the right. Each opened tag has to be closed tag.
既然你是初学者。我会直截了当的。以下是您的代码的提取。我使用了内部样式表。您正在使用外部样式表的示例。使用浮动属性，您可以将其设置为左右。这里使用 float:left 将一个 div 向左点燃，float:right 将另一个 div 点燃到右侧。每个打开的标签都必须是闭合的标签。
<head>
</head>
<!--Internal style sheet-->
<style>
.left{
float:left;
}
.right{
float:right;
}
</style>
<body>
<div id="wrapper" >
<div class="left">
<p class="t0">lorum itsum left</p>
</div>
<div class="right">
<p class="t0">lorum itsum right</p>
</div>
</div>
</body>
</html>
Additional note: If you want to adjust the size of left and right div then use width in style sheet. Refer the updated style sheet below. I made left div width to 80% of the screen width and right width to 20%.(total should be 100%). Adjust accordingly.Background color used to set the background color of the div.
附加说明：如果要调整左右 div 的大小，请使用样式表中的宽度。请参阅下面的更新样式表。我将左 div 宽度设为屏幕宽度的 80%，将右宽度设为 20%。（总数应为 100%）。相应调整。背景色用于设置div的背景色。
.left{
float:left;
background-color:powderblue;
width:80%;
}
.right{
float:right;
width:20%;
background-color:yellow;
}
回答by wanovak
Like this?
像这样？
<div id="wrapper">
<div id="inner">
<div id="left">
Left Content
</div>
<div id="right">
Right Content
</div>
</div>
</div>
div {
height: 50px;
}
#wrapper {
width: 200px;
overflow-x: auto;
overflow-y: hidden;
background-color: #ccc;
}
#inner {
width: 400px;
}
#left {
width: 150px;
float: left;
background-color: #f00;
}
#right {
width: 150px;
float: left;
background-color: #0f0;
}?
