【问题标题】: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;
    }
    

    【讨论】:

      猜你喜欢
      • 2014-10-29
      • 1970-01-01
      • 1970-01-01
      • 2011-02-05
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多