Как сделать <div>встроенным? Все <div>, даже когда их общая ширина больше ширины их родителя? - PullRequest
Новая
       18

Как сделать <div>встроенным? Все <div>, даже когда их общая ширина больше ширины их родителя?

4 голосов
/ 24 января 2011

Мне нужно сделать <div> встроенным и скрыть их с помощью «overflow: hidden» для их родителя.

Ширина для <div> установлена ​​на 20% со свойством «box-sizing», поэтомуони составляют ровно 20% от их родительской ширины.

Обычный метод, использующий "float: left", не помогает, потому что он отображает только 5 <div> в одной строке, а остальные показываютсяв новой строке под первым 5 <div>.

Как сделать так, чтобы все <div> отображались встроенными и скрывали остальные, если они слишком широки, чтобы быть отображенными внутри их родителя, используя "overflow: hidden«?

У меня следующая структура документа: 

<body>
<div class="column">
    <div class="header">Some text</div>

    <ul class="item_list">
        <li class="simple"><a href="">Some text<br></a></li>
        <li class="simple"><a href="">Some text<br></a></li>
        <li class="simple"><a href="">Some text<br></a></li>
        ...
    </ul> 
</div>

Вы можете видеть, что я имею в виду здесь .Но я сделал это, используя javascript (установлен для <div> "position: absolute" и сгенерирован "margin-left" для каждого elemet), и это вызывает большие проблемы для будущего развития.

Ответы [ 5 ]

10 голосов
/ 24 января 2011

DEMO: http://jsfiddle.net/marcuswhybrow/7YDfE/3/

Используйте display: inline-block и white-space: nowrap в комбинации: 

<div class="wrapper">
    <div class="inline"></div>
    <div class="inline"></div>
    <div class="inline"></div>
</div>

Затем используйте соответствующий CSS: 

div.wrapper {
    width: 200px; /* or whatever */
    overflow: hidden;
    white-space: nowrap;
}

div.inline {
    display: inline-block;
}

Демонстрация содержит небольшую анимацию jQuery для иллюстрации эффекта:

DEMO: http://jsfiddle.net/marcuswhybrow/7YDfE/3/

1 голос
/ 24 января 2011

Если элементы div равны display: inline, то применение white-space: nowrap; к родительскому элементу предотвратит их перенос в новые строки.

0 голосов
/ 18 января 2014

Это будет делать то, что вы хотите, с добавлением удаления пробела между ними при одновременном хорошем форматировании кода.Контейнер получает размер шрифта: 0px ftw.

Разметка 

<div class="wrapper">
    <div class="inline">Some text </div>
    <div class="inline">Some sample text </div>
    <div class="inline">Some Other text </div>
</div>

CSS 

div.wrapper {
    width: 250px; /* or whatever */
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid red;
    font-size:0px;
}

div.inline {
    display: inline-block;
    width: 80px;
    height: 20px;
    background-color: black;
    color:white;
    margin: 0; padding: 0;
    border: 1px solid blue;
    font-size:12px;
}
0 голосов
/ 24 января 2011

Если вы установите фиксированное значение высоты контейнера div и зададите все внутренние элементы display: inline-block, это должно сработать.inline-block сделает каждый элемент выровненным по левому краю, но сохранит его размеры, в то время как контейнер с фиксированной высотой скроет все переполнения на новую строку.

0 голосов
/ 24 января 2011

Поскольку у вас есть известное количество делений, вы пытались использовать абсолютное позиционирование вместо поплавков и указывать слева: 20% слева: 40% и т. Д .?

...