Позиционирование Div

Question

Итак, у меня есть какой-то блок, и этот блок должен содержать два div, первый div должен быть слева (прикреплен к блоку), второй справа (прикреплен к блоку), и эти два div должны охватывать все размеры блока.

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 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 3

Вы бы сделали это так.

<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 4

Попробуйте это:

<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 5

Будет ли что-то подобное делать то, что вы хотите?

<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 6

Настройте поля и ширину, и все готово.

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