Question

我正在尝试构建一个快速概述，显示即将到来的日历周。我希望它水平排列，如果我们显示完整的日历周，它会变得相当宽。

我现在已经设置了一个具有固定宽度的内部div（以便浮动的“day”div不会返回到下面）和一个设置为width的外部div：100％。我想让外部div水平滚动，如果页面调整大小，以便内部div不再适合它，而是外部div固定在内部div的宽度更大，页面本身滚动。

Gah我不擅长解释这些事情......这里有一些代码可以清除它......

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>

所以再试一次 - 我希望cal_scroller div始终是页面宽度，但如果浏览器调整大小以使cal_container不再适合我想要它滚动WITHIN容器。如果我在cal_scroller上设置一个固定的宽度，我可以使它全部工作，但这显然不是我想要的行为。如果我不需要，我宁愿不使用任何javascript作弊来调整div的宽度。

Answer 1

您的cal_scroller班级是100％+ 20px（填充）宽。在cal_container使用保证金，如下所示：

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

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

有关框模型如何工作的说明，请参阅here（简而言之，所有超出元素的宽度/高度）。

此外，块元素（如<div> s）默认为100％宽度，使您的100％宽度声明冗余。

Answer 2

我没有仔细阅读你的问题，但当你有width: 100%和padding时，这通常不是你想要的。

100% + 20px > 100% - 这可能是问题所在。

Answer 3

我看到的一个问题是您的width: 100%规则。 div.cal_scroller已经是块级元素，因此它默认填充整个页面宽度。（更不用说在 top 的宽度上添加了填充，因此最终会使div大于页面。）

摆脱宽度规则，你应该是金色的。（我只是尝试自己，它就像一个魅力。）

Answer 4

我为此苦苦挣扎，但我找到的最简单的解决方案是添加：

.cal_container { white-space: nowrap; }

这样你就不必给它一个宽度。它只是确保一切都保持在一行。

获得100％div内的水平滚动条

4 个答案: