在anohter div内左右定位div

我对css和html相当陌生，而且我在另一个div内浮动div有困难，我在网上做了相当多的研究，但一直未能解决方案。在anohter div内左右定位div

这些都是我看过的网站，并没有用的地方：

barelyfitz /截屏/ HTML的培训/ CSS /定位/

计算器/问题/ 580195/CSS布局-2 -column固定流体

mirificampress /show.php?id=106

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

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

来源

2012-04-27 RLoniello

确保您正确关闭标签。您的div没有正确的结束标记，因此它们不会像我相信您期望的那样包装您的内容。 – kinakuta 2012-04-27 17:44:00

花车在哪里？ – PeeHaa 2012-04-27 17:44:15

我删除了漂浮物来尝试我在http://www.positioniseverything.net/easyclearing.html发现的东西 – RLoniello 2012-04-27 17:47:47

我希望这将有助于。 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>

来源

2012-04-27 17:46:37 KBN

KinaKuta是正确的，*感叹*正确和简单的方法可以在http://jsfiddle.net/CCAtj/找到 – RLoniello 2012-04-27 17:53:43

没事，尽情编码吧！ – KBN 2012-04-27 17:54:30

我刚刚找到了Stackoverflow，你们真是太棒了，现在可以得到一个编辑器，而不是用记事本做每一件事......虽然对于其他noobs来说，这是很好的历史参考。特别感谢KinaKuta和xFortyFourx – RLoniello 2012-04-27 17:57:24

是否这样？

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

来源

2012-04-27 17:43:16 wanovak

既然你是一个初学者。我会直接向前。下面是你的代码的提取。我使用内部样式表。你正在使用外部样式表的例子。使用float属性可以将它设置为左侧和右侧。这里使用float：left让一个div左移，float：右移右另一个。每个打开的标签必须是封闭的标签。

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

来源

2017-05-05 13:01:29 user3090370

在anohter div内左右定位div

回答

相关问题