HTML Div，列，水平滚动条 [英] HTML Divs, Columns, Horizontal Scroll Bar

问题描述

我正在尝试在彼此相邻的列中显示几个数据块.我已将容器设置为显示内联，如果列相对较薄，则效果很好.一列超过水平屏幕长度时，其他列将追加到底部.

I'm trying to display several chunks of data in columns next to each other. I have set the container to display inline, which works great if the columns are relatively thin. As soon as a column exceeds the horizontal screen length, the other columns get appended to the bottom.

我的问题是这样的:如何显示带有水平滚动条的水平放置的嵌入式列div?

My question is this: How can display inline column divs that are placed horizontally, with a horizontal scroll bar?

注意:我实际上想要滚动条；我希望元素并排.

Note: I actually WANT the scroll bar; I want the elements side by side.

<div class="container">
    <div class="child" id="1">Stuff</div>
    <div class="child" id="2">Stuff</div>
</div>

---------

.child {
   /*float:left;
   margin-right:5em;*/
   display:inline;
}
.container {
   display:inline;
   overflow: scroll-x;
   white-space: nowrap;

}

谢谢，
迈克尔

Thanks,
Michael

推荐答案

我们正试图阻止浏览器完成其正常工作:以适合当前窗口大小的方式布局内容.不管是阻塞还是内联的东西都没关系，但浏览器仍会尝试将其放入窗口中.

We're trying to keep the browser from doing it's normal job: layouting stuff in such a way that it fits into the current window-size. It doesn't matter if the stuff is block or inline, still the browser will try to fit it inside the window.

您可以为容器设置固定宽度，以确保所有列都有足够的空间:

You can give your container a fixed width to ensure enough space for all the columns:

.child {
   margin-right:50px;
   float:left;
   width: 100px;
   border: 1px black solid;

}

.container {
   width: 1520px;
   overflow: scroll-x;
   border: 1px red solid;
}

示例页面

示例页面http的屏幕截图://www.users.fh-salzburg.ac.at/~bjelline//css-layout/sidebyside.png

这篇关于HTML Div，列，水平滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！