Div定位

Question

所以，我有一些块，这个块必须包含两个div，第一个div必须在左边（附加到块），第二个在右边（附加到块），这两个div必须覆盖所有块大小。 / p>

Answer 1

<div id="block" style="width:800px">
   <div id="left" style="float:left;width:50%;"> left </div>
   <div id="right" style="float:right;width:50%;"> right</div>
</div>

两个div的宽度都是父级div的一半。

但是你必须小心边框，因为width定义了内容的宽度（即没有边框）。因此，如果您使用边框，右侧框将显示在左侧下方，但仍显示在右侧。

Answer 2

这样的事情能做你想做的吗？

<div id="container">
    <div id="leftside" style="width:100px; float:left">
        Left Side
    </div>
    <div id="rightside" style="margin-left: 100px;">
        Right Side
    </div>
</div>

您可能需要根据填充（和明显的宽度）调整左边距。这是获得两列方法的简单方法（即使两列是一个小盒子）：）

或者为了分离HTML和CSS，相同的代码再次分为两部分:)：

<强> HTML

<div id="container">
    <div id="leftside"></div>
    <div id="rightside"></div>
</div>

<强> CSS

#container:
{
    /* insert any requires styles here :) */
}
#leftside:
{
    width: 100px;
    float: left;
}
#rightside:
{
    margin-left: 100px;
}

Answer 3

试试这个：

<div id="container">
  <div id="left">
    Some Content
  </div>

  <div id="right">
    Some Content
  </div>
</div>

<强> CSS：

<style type="text/css">
#container
{
  width:500px;
  height:500px;
  position:relative;
}

#left
{
  width:250px;
  height:250px;
  position:absolute;
  float:left;
}

#right
{
  width:250px;
  height:250px;
  position:absolute;
  float:right;
}
</style>

Answer 4

你会这样做。

<div id="block">
    <div id="left"></div>
    <div id="right"></div>
</div>

css将是

#block {
    width:800px;
    display:block //not sure if this line is required or not
}
#left {
    width:400px;
    float:left;
}
#right {
    width:400px;
    float:left;
}

Answer 5

有很多方法可以做到......这是一个：

<div style="position: relative; width: 100%; ">
    <div style="position: absolute; left: 0; width: 50%; ">
        <p>Content</p>
    </div>
    <div style="position: absolute; right: 0; width: 50%; ">
        <p>Content</p>
    </div>
</div>

Answer 6

调整边距和宽度，你就完成了。

<div id="main">
    <div id="left" style="float:left">
         Content Left
    </div>
    <div id="right" style="float:right">
         Content Right
    </div>
</div>