当前位置: 首页 > 面试题库 >

如何使固定宽度DIV中的浮动DIV能够水平继续?

蓟雪峰
2023-03-14
问题内容

我有一个固定高度和宽度(275x1000px)的容器DIV。在此DIV中,我想放置多个浮动DIV,每个宽度为300px,并具有水平(x轴)滚动条,以允许用户左右滚动查看所有内容。

到目前为止,这是我的CSS:

div#container {
    height: 275px;
    width: 1000px;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: 275px;
}

div#container div.block {
    float: left;
    margin: 3px 90px 0 3px;
}

问题在于浮动的DIV将不会继续超过容器的宽度。在放置三个浮动DIV之后,它们将继续在下面。如果将overflow-
y更改为auto,则出现垂直滚动条,并且可以向下滚动。

我如何更改此设置以使浮动DIV继续前进而又不互相影响?


问题答案:
div#container {
    height: 275px;
    width: 1000px;
    overflow: auto;
    white-space: nowrap;
}

div#container span.block {
    width: 300px;
    display: inline-block;
}

这里的技巧只是只有默认情况下内联的元素在Internet Explorer中设置为内联块时才能正常工作,因此内部容器需要为而不是



 类似资料:
  • 问题内容: 我知道这个问题存在一百万次,但是我找不到解决方案。我有一个div,它应该固定在屏幕上,即使滚动页面,它也应该始终保持在屏幕中间! 对于所有浏览器尺寸,div应该具有宽度,应该远离顶部(页边距),应该在页面中间水平居中,并且在滚动其余页面时不应移动。 那可能吗? 问题答案:

  • 问题内容: 我有一个将具有此CSS的div: 现在,如何才能使该div居中?我可以使用,但是只有在屏幕大于900像素时才能使用。之后(当窗口<900像素时),它将不再居中。 我当然可以用某种js来做到这一点,但是用CSS做到这一点“更正确”吗? 问题答案: 您可以居中或定位的元素设置和到,然后与以,如果你是一个中心定位的元素。

  • 问题内容: 我有两个div容器。 虽然其中一个需要为特定宽度,但我需要对其进行调整,以便另一个div占用其余空间。有什么办法可以做到吗? 问题答案: HTML: CSS: 您也可以使用这样做,这通常是一种更好的方法:如何将输入元素与其标签放在同一行?

  • 问题内容: 滚动到该位置后如何使它固定?我在页面的后面有一个,您需要滚动到那个页面。 如果我使用: 在出现之前就应该正常显示。我需要的一个很好的例子是9gag上的第二个广告。如果屏幕分辨率足够低,则在加载首页后您将看不到该广告,但是向下滚动后,您会看到第二个广告,并且在向下滚动时它将保持固定。 问题答案: 我知道这仅被标记为html / css,但是您不能仅使用css来做到这一点。最简单的方法是使

  • 问题内容: 我正在寻找一种将2个div作为列的方法,其中右侧的div具有固定的宽度,左侧的div填充剩余空间。 有谁碰巧知道是否可以做到这一点? 我的尝试 (在block1下面提供了block2) : 问题答案: 您可以这样做: HTML: CSS:

  • 我有一个可以垂直扩展和收缩的父div。里面有两个儿童沙发。我想根据父div的高度对孩子进行定位: > 父母 --------------------------------------------------------------------------------- |-孩子 ------------| |----------------------| |-------------------