Arhn - архитектура программирования

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

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

Краткий текст

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

Длинный текст

<!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>
css css-position css-float
19.04.2011

  • Просто чтобы я понял, вы не хотите, чтобы результат выглядел как на втором рисунке, и вместо этого вы хотите, чтобы box1 расширялся вниз, чтобы заключить box2 и box3? 19.04.2011

Ответы:


1

Вам нужно, чтобы блок 3 был элементом блочного уровня, поэтому используйте display:block, а затем добавьте overflow:hidden в сочетании с float в блоке 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

19.04.2011
  • это прекрасно работает, спасибо! Я задокументировал это решение более подробно здесь (мне было интересно узнать, почему overflow: hidden имеет такой эффект), а также представил там другое решение, в котором используется margin-left: wiki.orbeon.com/forms/doc/contributor-guide/ 19.04.2011
  • Ссылка @avernet не указывает на соответствующий раздел. Вот правильная ссылка wiki.orbeon.com/forms/doc/contributor-guide/ 15.10.2014
  • overflow:hidden действительно работает очень хорошо во многих случаях, в том числе и в этом. Но решение, которое работает более последовательно по всем направлениям, — это ясное исправление, упомянутое в ответе @hesselbom. Более полноценное решение сетки, которое по-прежнему очень гибкое (т. е. не ограничено макетом из 12 столбцов), см. решение/" rel="nofollow noreferrer">csswizardry.com/2013/02/responsive-grid-systems-a-solution. См. также фреймворки purecss.io и materializecss.com. 21.11.2015

    • 2

    Есть несколько способов добиться этого. Два распространенных варианта: либо иметь пустой элемент сразу после 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;
}
    03.12.2013

    3

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

    #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.

    19.04.2011
  • спасибо, что нашли время, чтобы вмешаться, но это не работает для меня. Вот HTML-код с предложенным вами стилем: goo.gl/dNWp4. Предложение @Richard (goo.gl/3H96P) работает для меня, поэтому, если вас это особенно не интересует, не нужно беспокоиться об этом. 19.04.2011
  • Ах, я пропустил, что это были спаны, а не дивы. Если на них используется display: block, он должен работать лучше. 19.04.2011
  • Я вижу, и заставил его работать, используя display: block. Вы используете комбинацию position: absolute в поле 2 и margin-left в поле 3, чтобы они не перекрывали поле 2. Я также нашел очень похожее решение, используя float: left в поле 2 вместо position: absolute. См. решение 2 в этом разделе: wiki.orbeon.com/forms/doc/contributor-guide/ 19.04.2011
    • Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..