Вопросы Теги

Как сделать `float: left` без переноса?

У меня есть контейнер box1 , который имеет определенную ширину (которая может меняться в зависимости от его содержимого). Это поле содержит box2 с фиксированной шириной (это может быть значок). Рядом с box2 у меня есть box3 с некоторым текстом. Я хочу, чтобы текст занимал все пространство справа от box2 . Вставив HTML-код ниже, вы получите:

Short text

Пока все хорошо. Если текст становится длиннее, он не оборачивается вокруг box2 (что мне и нужно), однако он не увеличивает box1 , что является моей проблемой. Вы скажете мне: «Эй, если вы сделали box3 a position: absolute , как вы могли ожидать, что это заставит box1 расти?». Ну, я не знаю, но тогда, как я могу заставить box3 показывать рядом с box2 , использовать все доступное горизонтальное пространство и при необходимости увеличить box1 ? (Должен ли я сказать, что я хотел бы, чтобы эта работа продолжалась в IE6 и во избежание использования таблицы?)

Long text

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style type="text/css">
            #box1 { position: relative }
            #box3 { position: absolute; left: 2.5em; right: .5em; top: .5em }

            /* Styling */
            #box1 { background: #ddd; padding: 1em 0.5em; width: 20em }
            #box2 { background: #999; padding: .5em; }
            #box3 { background: #bbb; padding: .5em; }
            body  { font-family: sans-serif }
        </style>
        <script type="text/javascript">
        </script>
    </head>
    <body>
        <div id="box1">
            <span id="box2">2</span>
            <span id="box3">3</span>
        </div>
    </body>
</html>
29
задан avernet 19 April 2011 в 00:52
поделиться