想让DIV中的DIV一直往右排一串

wjf598 2018-02-05 08:18:18

我想让DIV1中的DIV2一直往右排一串，但是试了好多样式，还是往下走。
DIV1和DIV2的大小都必须固定。
特来指教

代码如下：



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>MyDIV</title>

</head>

<style>

.div1 {

	height: 200px;

	width: 600px;

	background: #090;

	float:left;

	overflow:auto;

}

.div2 {

	height: 96px;

	width: 60px;

	background: #666;

	margin: 2px;

	float:left

}

</style>

<body>

<div class="div1">

  <div class="div2"></div>

  <div class="div2"></div>

  <div class="div2"></div>

  <div class="div2"></div>

  <div class="div2"></div>

  <div class="div2"></div>

  <div class="div2"></div>

  <div class="div2"></div>

  <div class="div2"></div>

  <div class="div2"></div>

  <div class="div2"></div>

</div>

</body>

</html>

...全文

461 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

wjf598 2018-02-10

打赏
举报

同样目的可以用<div><<table height="600">……</table></div>来实现，但必须指定表格宽度，不然会因内容增加会挤占宽度的。特别感谢hf_872914334!!!

wjf598 2018-02-08

打赏
举报

谢谢各位回复，当天我也用了一个小技巧也能凑合用，等手果活儿忙完再来结帐。

wjf598 2018-02-05

打赏
举报

引用 2 楼 jiandan217 的回复:

div1float left 总宽度是600px ，里面div2float 每个宽度是60px，div1里面最多可以放10个div2，多了之后宽度就超出了，剩下的自然就换行了

有没有办法不让他自然呢？

wjf598 2018-02-05

打赏
举报

引用 1 楼 usecf 的回复:

不要固定div的宽度 .div1 { height: 200px; width:100%; background: #090; float:left; overflow:auto; }

要求Div1的宽度只能600，而不让Div2k串到下边的

小程序猿之路 2018-02-05

打赏
举报

div1float left 总宽度是600px ，里面div2float 每个宽度是60px，div1里面最多可以放10个div2，多了之后宽度就超出了，剩下的自然就换行了

usecf 2018-02-05

打赏
举报

不要固定div的宽度 .div1 { height: 200px; width:100%; background: #090; float:left; overflow:auto; }

hfhan_872914334 2018-02-05

打赏
举报

子元素不要浮动，设置为行内块或行内元素

hfhan_872914334 2018-02-05

打赏
举报

css强制不换行 white-space: nowrap;

hfhan_872914334 2018-02-05

打赏
举报

[code=html][<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ box-sizing:border-box; margin:0; padding:0; } .div1{ width:200px; height:60px; border:1px solid #f00; overflow:auto; white-space: nowrap; } .div2{ width:50px; height:30px; border:1px solid #00f; display:inline-block; } </style> </head> <body> <div class='div1'> <div class='div2'></div> <div class='div2'></div> <div class='div2'></div> <div class='div2'></div> <div class='div2'></div> </div> </body> </html>]