在另一个 div 中左右定位 div答案

【问题标题】：Positioning divs left and right within anohter div在另一个 div 中左右定位 div
【发布时间】：2012-05-08 11:25:26
【问题描述】：

我对 css 和 html 很陌生，在另一个 div 中浮动 div 时遇到问题，我在网上做了很多研究，但未能提出解决方案。

这些是我读过的网站以及没有用的地方：

barelyfitz /screencast/html-training/css/positioning/

stackoverflow /questions/580195/css-layout-2-column-fixed-fluid

mirificampress /show.php?id=106

How to get Floating DIVs inside fixed-width DIV to continue horizontally?

我的代码可以在jsFiddle上找到here

【问题讨论】：

确保正确关闭标签。您的 div 没有正确的结束标签，因此它们没有像我相信您期望的那样包装您的内容。
我删除了浮动来尝试我在positioniseverything.net/easyclearing.html找到的东西

标签： html css css-float positioning

【解决方案1】：

我希望这会有所帮助。 CSS：

#left, #right {
 width: 100px; //change this to whatever required
 float: left;
}

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>

【讨论】：

KinaKuta 是正确的，sigh 正确简单的方法可以在jsfiddle.net/CCAtj
我刚发现 Stackoverflow，你们太棒了，现在要一个编辑器，而不是用记事本做所有事情......虽然对于其他菜鸟来说是很好的历史参考。特别感谢 KinaKuta 和 xFortyFourx

【解决方案2】：

像这样？

http://jsfiddle.net/Ev474/

<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;
}

【讨论】：

【解决方案3】：

因为您是初学者。我会直截了当。以下是您的代码的提取。我使用了内部样式表。您的示例正在使用外部样式表。使用 float 属性，您可以将其设置为左右。这里使用 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>

补充说明：如果要调整左右div的大小，请在样式表中使用宽度。请参阅下面的更新样式表。我将左侧 div 宽度设置为屏幕宽度的 80%，右侧宽度设置为 20%。（总计应为 100%）。相应调整。背景色用于设置div的背景色。

.left{
float:left;
background-color:powderblue;
width:80%;
}
.right{
float:right;
width:20%;
background-color:yellow;
}

【讨论】：