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

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

23 голосов
/ 08 марта 2009

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

альтернативный текст 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>

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

Спасибо, Гаффа и Рич, взяв поплавок: слева от правой стороны была возможность центрировать текст, но чтобы цвет фона расширялся, мне также пришлось сделать цвет фона родительского DIV.

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

альтернативный текст 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>

Ответы [ 4 ]

16 голосов
/ 08 марта 2009

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

На самом деле вы используете не тот инструмент.

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

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

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

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

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

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

3 голосов
/ 08 марта 2009

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

<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>
1 голос
/ 08 марта 2009

Я склонен согласиться с адвокатами «используй стол», но после того, как некоторое время возился (не совсем понимая, что я делаю, вроде как), я придумал этот вариант, который исправляет проблему вертикального выравнивания в 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>
0 голосов
/ 08 марта 2009

Просто удалите 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...