如何让多个div不换行并出现横向滚动条

stalitz 2009-02-23 04:08:48

类似下面这样的结构，要求第二层的div不换行，最外层出现横向滚动条



<div style="width:200px; height:100px;">

	<div style="width:50px; height:100px;">

		<div>fdsaf</div>

		<div>dfffd</div>

	</div>

	<div style="width:50px; height:100px;">

		<div>fdsaf</div>

		<div>dfffd</div>

	</div>

	<div style="width:50px; height:100px;">

		<div>fdsaf</div>

		<div>dfffd</div>

	</div>

	<div style="width:50px; height:100px;">

		<div>fdsaf</div>

		<div>dfffd</div>

	</div>

	<div style="width:50px; height:100px;">

		<div>fdsaf</div>

		<div>dfffd</div>

	</div>

</div>

...全文

6063 19 打赏收藏转发到动态举报

写回复

用AI写文章

19 条回复

切换为时间正序

请发表友善的回复…

发表回复

laugh520 2012-08-22

打赏
举报

overflow设置下不行吗？再加上个float：left。感觉这样应该就可以了吧。

fengsky491 2009-02-26

打赏
举报

[Quote=引用 16 楼 zhangyingran 的回复:]
inline-block在IE块状元素下是可以hack掉的，先对块状元素使用 display:inline-block 属性，然后再在另一个CSS声明中将其设为display:inline，如：
.div1{display:inline-block;}
.div1{display:inline;}
这个.div1将使IE块状元素呈现inline-block的样式。
[/Quote]
弱弱的问问，请问什么是hack方法

stalitz 2009-02-25

打赏
举报

看来div还是有他的局限性。不能像表格一样横向撑开。

stalitz 2009-02-25

打赏
举报

xinyung
我知道你的意思，你这个方法如果不指定第二层的宽度就不可行了，但问题是这个宽度是不能指定的

xinyung 2009-02-25

打赏
举报

[Quote=引用 6 楼 stalitz 的回复:]
里面的div宽度和个数是不定的，就最外层是固定宽度。
[/Quote]
只告诉了你一个方法

stalitz 2009-02-25

打赏
举报

layers2323
我最初就是这样弄的，结果不行。里面的div并不能在一行，还是会折过来。

layers2323 2009-02-25

打赏
举报

把外层div高度宽度固定，指定overflow-x
然后每个div用float:left

stalitz 2009-02-25

打赏
举报

里面的div宽度和个数是不定的，就最外层是固定宽度。

xiaohuixiongya 2009-02-25

打赏
举报

学习了，有了这个hack方法方便多了

zhangyingran 2009-02-25

打赏
举报

inline-block在IE块状元素下是可以hack掉的，先对块状元素使用 display:inline-block 属性，然后再在另一个CSS声明中将其设为display:inline，如：
.div1{display:inline-block;}
.div1{display:inline;}
这个.div1将使IE块状元素呈现inline-block的样式。

stalitz 2009-02-25

打赏
举报

你还是用了inline-block
其实这个ie并不支持。用在div上就不起作用。只有默认是inline的元素才有效。比如span元素

不过正是有了你的代码参考，我才能搞定，把div改成span就行了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档 </title>
</head>
<body>
<div style="width:200px; height:100px; overflow-x:scroll;white-space:nowrap;">

<span style="display:inline-block; width:50px ;height:60px;">
<div>fdsaf</div>
<div>dfffd</div>
</span>
<span style="display:inline-block; width:50px ;height:60px;">
<div>fdsaf</div>
<div>dfffd</div>
</span>
<span style="display:inline-block; width:50px ;height:60px;">
<div>fdsaf</div>
<div>dfffd</div>
</span>
<span style="display:inline-block; width:50px ;height:60px;">
<div>fdsaf</div>
<div>dfffd</div>
</span>
<span style="display:inline-block; width:50px ;height:60px;">
<div>fdsaf</div>
<div>dfffd</div>
</span>

</div>
</body>
</html>

xiaohuixiongya 2009-02-25

打赏
举报

只加<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 不行，不过对<a>写
style="dispaly:inline-block"就可以了你是一下，在IE下行，火狐下没测试

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

<style>
body
{
width:100%;height:100%;text-align:center
}

.div1
{
width:600px;height:400px;margin:40px auto;
background:#aaccff;overflow:auto;word-break:keep-all;white-space :nowrap;padding:15px 15px 0 15px;
}
.div2
{
width:100%;height:22px;line-height:22px;font-size:0px;border:1px solid #FF9900;word-break:keep-all;white-space :nowrap;border-right:0px;

}
input
{
width:12px;height:12px;margin:5px 5px 0px 5px;

}
a
{
font-size:12px;width:80px;border-right:1px solid #FF9900;height:100%;background:#aacc00; display:inline-block
}
img
{
width:14px;height:14px; margin:0 5px -4px 5px;
}
</style>

</head>

<body>
<div class="div1" id="div1">

<div class="div2">
<input type="checkbox" id="input1"/>
<a style="border-left:1px solid #FF9900;">无皇帝</a>
<a>dddd</a>
<img src="../images/share/add.gif">
<a style="border-left:1px solid #FF9900;">dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
</div>
<div class="div2" style="border-top:0px">
<input type="checkbox" id="input1"/>
<a style="border-left:1px solid #FF9900;">无皇帝</a>
<a>dddd</a>
<img src="../images/share/add.gif">
<a style="border-left:1px solid #FF9900;">dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a> </a>
<a> </a>
<a> </a>
<a> </a>
<a> </a>
<a> </a>

</div>

</div>

</body>
</html>

stalitz 2009-02-25

打赏
举报

xiaohuixiongya
我的页面是按xhtml 1.0 strict写的
最上面有
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
在此标准下，width对inline的元素是不起作用的。除非是inline-block，但ie并不认inline-block

你可以试试在你哪个页面最上面加上这行看看

xiaohuixiongya 2009-02-25

打赏
举报

好像非块状元素就行，像5楼说的那样，我也遇到了同样的问题不过解决了你可以看一下，
《《这要是一个bug该怎么办？？？请教高手解答。。。。。。（关于css模拟表格）》》这个帖子，不过我用的是<a>标签，你用的是div，因为<a>本身是非块状元素，所以不用写
style="display:inline",可以运行的哦

stalitz 2009-02-24

打赏
举报

还是同样的问题
有<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
页面就会乱
我不可能去掉了，因为我页面的其他部分都按xhtml 1.0 strict标准的，去掉其他页面就不正常了。

还有我里面的内容肯定是比最外面的要宽，如果用float:left;他会自动换行的。

我现在把里面换成表格了，还是继续求div实现

别忘了在页面最上面加
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

xinyung 2009-02-24

打赏
举报

<div style="width:200px; height:100px; overflow-x:scroll;">

	<div style="width:250px;">

		<div style="display:inline; float:left; ">

			<div>fdsaf</div>

			<div>dfffd</div>

		</div>

		<div style="display:inline; float:left;">

			<div>fdsaf</div>

			<div>dfffd</div>

		</div>

		<div style="display:inline; float:left;">

			<div>fdsaf</div>

			<div>dfffd</div>

		</div>

		<div style="display:inline; float:left;">

			<div>fdsaf</div>

			<div>dfffd</div>

		</div>

		<div style="display:inline; float:left;">

			<div>fdsaf</div>

			<div>dfffd</div>

		</div>

		<div style="display:inline; float:left;">

			<div>fdsaf</div>

			<div>dfffd</div>

		</div>

	</div>

</div>

lzt_6666 2009-02-23

打赏
举报

<div style="width:250px; height:100px; overflow-x:scroll; white-space:nowrap">
<div style="width:50px; height:100px; display:inline;float:left;">
<div style="width:20px;float:left;">fdsaf</div>
<div style="width:20px;float:left;">dfffd</div>
</div>
<div style="width:50px; height:100px; display:inline;float:left;">
<div style="width:20px;float:left;">fdsaf</div>
<div style="width:20px;float:left;">dfffd</div>
</div>
<div style="width:50px; height:100px; display:inline;float:left;">
<div style="width:20px;float:left;">fdsaf</div>
<div style="width:20px;float:left;">dfffd</div>
</div>
<div style="width:50px; height:100px; display:inline;float:left;">
<div style="width:20px;float:left;">fdsaf</div>
<div style="width:20px;float:left;">dfffd</div>
</div>
<div style="width:50px; height:100px; display:inline;float:left;">
<div style="width:20px;float:left;">fdsaf</div>
<div style="width:20px;float:left;">dfffd</div>
</div>
</div>

stalitz 2009-02-23

打赏
举报

这个不行
我的页面有页头
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
不起作用了

xinyung 2009-02-23

打赏
举报

<div style="width:200px; height:100px; overflow-x:scroll; white-space:nowrap">

    <div style="width:50px; height:100px; display:inline">

        <div>fdsaf</div>

        <div>dfffd</div>

    </div>

    <div style="width:50px; height:100px; display:inline">

        <div>fdsaf</div>

        <div>dfffd</div>

    </div>

    <div style="width:50px; height:100px; display:inline">

        <div>fdsaf</div>

        <div>dfffd</div>

    </div>

    <div style="width:50px; height:100px; display:inline">

        <div>fdsaf</div>

        <div>dfffd</div>

    </div>

    <div style="width:50px; height:100px; display:inline">

        <div>fdsaf</div>

        <div>dfffd</div>

    </div>

</div>