Как сделать `float: left` без переноса? - PullRequest
Новая
       11

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

29 голосов
/ 19 апреля 2011

У меня есть контейнер 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>

Ответы [ 3 ]

39 голосов
/ 19 апреля 2011

Поле 3 должно быть элементом уровня блока, поэтому используйте display:block, а затем добавьте overflow:hidden в сочетании с float -ing box 2: 

<!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 {  }
            #box2 { float:left; }
            #box3 { display:block;overflow:hidden; }

            /* 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>
        <title>How to do a `float: left` with no wrapping?</title>
    </head>
    <body>
        <div id="box1">
            <span id="box2">2</span>
            <span id="box3">3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br /></span>
        </div>
    </body>
</html>

Удивительно, на что способны overflow:hidden: D

2 голосов
/ 03 декабря 2013

Есть несколько способов добиться этого. Два наиболее распространенных из них - это наличие пустого элемента сразу с clear: both, например, так (встроенный CSS только для демонстрации): 

<span class="box1">...</span>
<br style="clear:both"/>

Другой способ - использовать overflow: hidden примерно так: 

<span class="box1" style="overflow: hidden">...</span>

Однако есть проблемы с обоими этими решениями. С первым вы добавляете ненужную и некрасивую разметку. А со вторым, если вы хотите, чтобы что-то было расположено за пределами вашей коробки (например, position: absolute), оно не будет видно.

Более распространенное, современное решение - использовать псевдоэлемент ::after и очистить его следующим образом: 

.box1::after {
    content: '';
    display: table;
    clear: both;
}
0 голосов
/ 19 апреля 2011

Я бы порекомендовал следующее: 

#box1
{
    position: relative; /* or some other positioned value */
}

#box2
{
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0;
}

#box3
{
    margin-left: 10px;
}

Если #box2 имеет фиксированный размер, вы можете просто использовать поле для #box3, чтобы предотвратить его перекрытие #box2, и, поскольку оно не позиционировано, #box1 будет расти с ростом #box3.

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

Похожие темы

...