Размещение HTML / CSS Div

Question

Yo. Существует тенденция размещать div, чтобы они следовали друг за другом по вертикали, но сейчас я пытаюсь добиться того, чтобы в основном разместить несколько div (двух) внутри родительского div следующим образом:

<div id='parent'><div id='onediv'></div> <div id='anotherone'></div> </div>

И я хотел бы поместить «другого» справа от «onediv». К сожалению, float: right в значительной степени разрушает компоновку с divами, которые появляются из их родительских divов и так далее. Любые предложения приветствуются.

Редактировать: Возможно, стоит отметить, что родительский div и 'anotherone' вообще не имеют элементов высоты, а 'onediv' планировалось рассматривать как div 'height support', позволяя сделать содержимое 'anotherone' родительский div больше по желанию.

Снова отредактируйте: вот CSS для указанного материала:

.parent
{
width: 90%;
margin: 0 auto;
border:solid black 1px;
}
.firstchild
    {
        width: 20%;
        margin: 5px;
        border: solid black 1px;
        height: 180px;
    }
.secondchild
    {
            width: 60%;
            border:solid black 1px;
            margin: 5px;
    }

Answer 1

Вы можете использовать оба внутренних элемента div и переполнить внешний элемент div, чтобы он рос вместе с внутренними элементами div.

Пример:

#parent {
    overflow: hidden;
}
#parent div {
    width: 50%;
    float: left;
}

Answer 2

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

<div id="parent">
    <div id="onediv" style="float:left;"></div>
    <div id="anotherone" style="float:left;"></div>
    <div style="clear:both;"></div>
</div>

Answer 3

Вам обязательно нужно указать ширину, как указано в ответе @ Kevin, чтобы получить макет, который вы описали, простое указание float влево / вправо не даст желаемого эффекта. Попробуйте указать ширину в пикселях, а не в процентах. В противном случае или, если это вам не подходит, я думаю, что вам, возможно, нужно указать ширину внешнего div (через css, если хотите).

Answer 4

Я думаю, что это то, что вы хотите (обратите внимание на переупорядочение элементов DOM):

<div id="parent">
  <div id="anotherone"></div>
  <div id="onediv"></div>
</div>

/*CSS*/
#anotherone{
  float:right;
  width:50%;
}
#onediv{
  float:left;
  width:50%;
}

Обратите внимание: если это то, что вы хотите, IE6 все равно испортит это. ; -)

Answer 5

Просто используйте тег <span>. Это эквивалентно тому, что новый ряд не начинается.

Answer 6

#onediv { float: left; width: 50%; } #anotherone { float: right; width: 50%; }