Подтвердить что ты не робот

Как получить плавающий-DIV для заполнения свободного места в его родительском DIV?

Как я могу получить правильные плавающие DIVs, чтобы заполнить их свободное пространство?

alt text http://tanguay.info/web/external/cssRightSide.png

<html>
<head>
    <style type="text/css">
        .content{
                background-color: #fff;
                margin: 0px auto;
                width: 760px;
            border: 1px solid blue;
            font-size: 10pt;
        }

        .content .leftSide {
            background-color: yellow;
            float: left;
            padding: 5px;
        }

        .content .rightSide {
            background-color: orange;
            float: left;
            width: *;
            padding: 5px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="leftSide"><img src="test.jpg"/></div>
        <div class="rightSide">Right side text should be centered.</div>
        <div style="clear:both"></div>
    </div>
    <div class="content">
        <div class="leftSide"><img src="test2.jpg"/></div>
        <div class="rightSide">And the background should fill the DIV of course.</div>
        <div style="clear:both"></div>
    </div>
</body>

</html>

ПРОМЕЖУТОЧНЫЙ ОТВЕТ:

Спасибо Guffa и Rich, взяв float: оставленный с правой стороны, позволил центру по центру, но чтобы получить цвет фона, я должен был также сделать цвет фона родительского DIV.

Тем не менее, я до сих пор не могу заставить текст выравниваться по середине по вертикали, так как DIV на самом деле не идет полностью вниз, есть ли у него "авто"? например height: *, или float-down: auto? Как упоминалось ниже в Cletus, все это было бы тривиально в таблицах HTML, дизайнеры CSS наверняка включали какое-либо свойство, чтобы "сделать вертикальное пространство заполненным вниз".

alt text http://tanguay.info/web/external/cssRightFixed.png

<html>
<head>
    <style type="text/css">
        .content{
                background-color: orange;
                margin: 0px auto;
                width: 760px;
            border: 1px solid blue;
            font-size: 10pt;
        }

        .content .leftSide {
            background-color: yellow;
            float: left;
            padding: 5px;
        }

        .content .rightSide {
            background-color: orange;
            padding: 5px;
            text-align: center;
        vertical-align: middle; /* DOESN'T WORK SINCE THE DIV DOES NOT ACTUALLY GO ALL THE WAY DOWN */
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="leftSide"><img src="test.jpg"/></div>
        <div class="rightSide">Right side text should be centered.</div>
        <div style="clear:both"></div>
    </div>
    <div class="content">
        <div class="leftSide"><img src="test2.jpg"/></div>
        <div class="rightSide">And the background should fill the DIV of course.</div>
        <div style="clear:both"></div>
    </div>
    <div class="content">
        <div class="leftSide"><img src="test3.jpg"/></div>
        <div class="rightSide">And the background should fill the DIV of course.</div>
        <div style="clear:both"></div>
    </div>
    <div class="content">
        <div class="leftSide">this is a text on the left with no image</div>
        <div class="rightSide">And the background should fill the DIV of course.</div>
        <div style="clear:both"></div>
    </div>
</body>

</html>
4b9b3361

ОТВЕТЫ

Ответ 1

Если вы используете поплавки, вам очень нужно дать им ширину. Поплавки прекрасны, если вы укажете ширину или вы довольны тем, что браузер вычисляет как минимальную требуемую ширину. Как только вам понадобится их расширить, чтобы заполнить доступное пространство, вам не повезло.

Фактически вы используете неправильный инструмент.

Итак, у вас есть две возможности:

  • Исправить размер поплавков; или
  • Используйте таблицу.

С таблицами это проблема с trvial для решения (ждет, когда фанатики анти-таблицы pure-CSS будут сходить с ума).

РЕДАКТИРОВАТЬ: Хорошо, вы хотите сделать вертикальное центрирование. Теперь у вас действительно проблемы. См. Можете ли вы сделать эту компоновку HTML без использования таблиц?, поскольку жесткий простой шаблон может быть с чистым CSS, особенно если вы хотите сделать вертикальное центрирование (когда контейнер или ребенок не является фиксированной высотой) или бок о бок.

Снова таблицы делают это тривиальным с vertical-align: middle.

Если вам нужна дополнительная информация о вертикальном центрировании с помощью чистого CSS, см.

Ответ 2

Это должно делать то, что вы хотите. Там нет необходимости плавать с правой стороны, если вы также плаваете влево. Просто позвольте правой стороне быть как обычно, и она по умолчанию заполнит доступное пространство.

<html>
<head>
    <style type="text/css">
        .content{
                background-color: orange;
                margin: 0px auto;
                width: 760px;
                border: 1px solid blue;
                font-size: 10pt;
                overflow: auto;
        }

        .content .leftSide {
                background-color: yellow;
                float: left;
                padding: 5px;
        }

        .content .rightSide {
                padding: 5px;
                text-align: center;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="leftSide"><img src="test.jpg"/></div>
        <div class="rightSide">Right side text should be centered.</div>
    </div>
    <div class="content">
        <div class="leftSide"><img src="test2.jpg"/></div>
        <div class="rightSide">And the background should fill the DIV of course.</div>
    </div>
</body>
</html>

Ответ 3

Я склонен соглашаться с адвокатами "использовать таблицу", но после некоторого времени возиться (не зная, что я делаю), я придумал эту вариацию, которая устраняет проблему вертикального выравнивания в Firefox, Safari, Chrome и т.д. и не делает его хуже в IE.

(мои изменения находятся на строках с меньшим отступом)

<html>
<head>
    <style type="text/css">
        .content{
                background-color: orange;
                margin: 0px auto;
                width: 760px;
                border: 1px solid blue;
                font-size: 10pt;
            display:table;
        }

        .content .leftSide {
                background-color: yellow;
                float: left;
                padding: 5px;
        }

        .content .rightSide {
            border:1px solid black; /* for debugging */
            display:table-cell;
            width:100%;
                background-color: orange;
                padding: 5px;
                text-align: center;
                vertical-align: middle; /* DOESN'T WORK IN IE */
        }
      .content .text {
          width:150px;
      }
    </style>
</head>

<body>
    <div class="content">
        <div class="leftSide"><img src="test.jpg"/></div>
        <div class="rightSide">Right side text should be centered.</div>
        <div style="clear:both"></div>
    </div>
    <div class="content">
        <div class="leftSide"><img src="test2.jpg"/></div>
        <div class="rightSide">And the background should fill the DIV of course.</div>
        <div style="clear:both"></div>
    </div>
    <div class="content">
        <div class="leftSide"><img src="test3.jpg"/></div>
        <div class="rightSide">And the background should fill the DIV of course.</div>
        <div style="clear:both"></div>
    </div>
    <div class="content">
      <div class="leftSide text">this is a text on the left with no image</div>
        <div class="rightSide">And the background should fill the DIV of course.</div>
        <div style="clear:both"></div>
    </div>
</body>

</html>

Ответ 4

Просто удалите float:left; в классе .rightSide (и width:*;).

Ширина по умолчанию для div равна auto, что позволяет использовать доступную ширину.

Edit:
Вот код с изменением:

<html>
<head>
    <style type="text/css">
        .content{
                background-color: #fff;
                margin: 0px auto;
                width: 760px;
                border: 1px solid blue;
                font-size: 10pt;
        }

        .content .leftSide {
                background-color: yellow;
                float: left;
                padding: 5px;
        }

        .content .rightSide {
                background-color: orange;
                padding: 5px;
                text-align: center;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="leftSide"><img src="test.jpg"/></div>
        <div class="rightSide">Right side text should be centered.</div>
        <div style="clear:both"></div>
    </div>
    <div class="content">
        <div class="leftSide"><img src="test2.jpg"/></div>
        <div class="rightSide">And the background should fill the DIV of course.</div>
        <div style="clear:both"></div>
    </div>
</body>

</html>