HTML: разделить родительский div "плавно" - PullRequest
Новая
       4

HTML: разделить родительский div "плавно"

1 голос
/ 19 июня 2009

Мне интересно, как сделать так, чтобы два дочерних элемента делили общий родительский элемент.

Я хочу, чтобы левый столбец содержал текст из базы данных (одно слово). Это может быть длиной от 1 до 10 букв. Поскольку я хочу, чтобы ширина левых столбцов идеально вписывалась в слово, я не задаю ему заданную ширину.

Затем я попытался заполнить оставшееся пространство правым столбцом.

Есть ли простой способ сделать это?

Я не уверен, что установить правильную колонку css, чтобы это произошло. 

<div id="parent_div" style="width: 100px; height: 100px;">
     <div style="background-color:blue; float:left;" id="left_column">
           blue
     </div>
     <div style="background-color:red; float: left;" id="right_column">
           red
     </div>
</div>

Я читал, что вы не должны что-то плавать, не задавая ширину, но тогда кажется, что то, что я хочу, было бы невозможно.

Спасибо

Ответы [ 2 ]

1 голос
/ 19 июня 2009

Я думаю, вы получите желаемый эффект, если просто не всплываете второе деление. 

<body>
<div id="parent_div" style="width: 100px; height: 100px;">
<div id="left_column" style="background-color: blue; float: left;"> blue </div>
<div id="right_column" style="background-color: red;"> red </div>
</div>
</body>

В Firefox это именно то, что вы хотите. Красный столбец занимает все оставшееся пространство, не занятое синим столбцом.

0 голосов
/ 19 июня 2009

Ну, для начала я бы посоветовал сделать правый столбец плавающим вправо - это должно поставить его рядом с левым столбцом. Не уверен насчет ширины левого столбца.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...