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

Я установил его прямо сейчас с внутренним div с фиксированной шириной (чтобы плавающие "дневные" div не возвращались ниже) и внешним div, для которого задана ширина: 100%. Мне бы НРАВИТСЯ, чтобы внешний div прокручивался по горизонтали, если размер страницы изменен так, что внутренний div больше не помещается в нем, но вместо этого внешний div фиксируется больше по ширине внутреннего div, а сама страница прокручивается.

Ха, я не умею объяснять эти вещи ... Вот небольшой код, который может прояснить это ...

CSS:

.cal_scroller {
    padding: 0;
    overflow: auto;
    width: 100%;
}

.cal_container {
    width: 935px;
}

.day {
    border: 1px solid #999;
    width: 175px;
    height: 200px;
    margin: 10px;
    float: left;
}

И (упрощенная) структура:

<div class="cal_scroller">
    <div class="cal_container">
        <div class="day">Monday</div>
        <div class="day">Tuesday</div>
        <div class="day">Wednesday</div>
        <div class="day">Thursday</div>
        <div class="day">Friday</div>
    </div>
</div>

Итак, чтобы попробовать еще раз - я бы хотел, чтобы div cal_scroller всегда был шириной страницы, но если размер браузера изменится так, что cal_container больше не подходит, я хочу, чтобы он прокручивался ВНУТРИ контейнера. Я могу заставить все это работать, если я установлю фиксированную ширину для cal_scroller, но, очевидно, это не то поведение, к которому я собираюсь. Я бы предпочел не использовать какие-либо читы javascript для регулировки ширины div, если мне это не нужно.

2
Matt Brunmeier 17 Июл 2009 в 19:12

4 ответа

Лучший ответ

Ваш класс cal_scroller имеет ширину 100% + 20 пикселей (отступ). Вместо этого используйте поле cal_container, например:

.cal_scroller {
    padding: 10px 0;
    overflow: auto;
    width: 100%;
}

.cal_container {
    margin: 0 10px;
    width: 935px;
}

См. здесь, чтобы узнать, как работает блочная модель (короче говоря, все находится за пределами ширины / высоты элемента).

Кроме того, блочные элементы (например, <div> s) по умолчанию имеют 100% ширину, что делает ваше объявление 100% ширины излишним.

6
Nikola K. 17 Июл 2012 в 00:05

Я много боролся с этим, но самым простым решением, которое я нашел, было добавление:

.cal_container { white-space: nowrap; }

Таким образом, вам не нужно указывать ширину на всех. Он просто следит за тем, чтобы все оставалось в одной строке.

1
MarvinVK 15 Сен 2016 в 14:14

Я не очень внимательно прочитал ваш вопрос, но когда у вас есть width: 100% и padding, это обычно не то, что вам нужно.

100% + 20px > 100% - это может быть проблемой.

2
Nikola K. 17 Июл 2012 в 00:04

Я вижу одну проблему - это ваше правило width: 100%. div.cal_scroller уже является элементом уровня блока, поэтому по умолчанию он заполняет всю ширину страницы. (Не говоря уже о том, что отступы добавляются по верху ширины, поэтому в результате получается, что этот div больше, чем страница.)

Просто избавьтесь от этого правила ширины, и вы станете золотым. (Я просто попробовал себя, и это сработало как шарм.)

2
Plutor 17 Июл 2009 в 15:19