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

Горизонтальная прокрутка в родительском div, содержащем плавающие дочерние div

У меня есть следующий код:

HTML

<div id="parent">
    <div class="child">2001</div>
    <div class="child">2O02</div>
    <div class="child">2003</div>
    <div class="child">2004</div>
    <div class="child">2005</div>
</div>

CSS

#parent{
width:100%;
overflow:auto;
}

.Child{
float:left;
width:20px;
}

Дочерний контент всегда переполняется, и это хорошо. Но я хочу иметь возможность горизонтальной прокрутки в родительском div, чтобы увидеть последние дочерние div.

Вот скриншот результата, как он у меня есть:

Скриншот

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

html css overflow css-float
12.06.2014

  • вам нужно очистить поплавки (в конце #parent). Затем дайте #parent набор высоты. 12.06.2014

Ответы:


1

Если вы хотите, чтобы все дочерние элементы находились в одной строке, вам нужно добавить второй «родительский» DIV и установить его ширину (объединенная ширина всех дочерних элементов для одной строки):

HTML:

<div id="parent">
    <div id="parent2">
        <div class="child">2001</div>
        <div class="child">2002</div>
        <div class="child">2003</div>
        <div class="child">2004</div>
        <div class="child">2005</div>
    </div>
</div>

CSS:

#parent{
    width:100%;
    overflow:auto;
}


#parent2{
    width:1000px;
}

.child{
    float:left;
    width:200px;
}
12.06.2014
Новые материалы
Коллекции публикаций по глубокому обучению
Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге 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 , и использованием..
Демистификация рекурсии
КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..