允许div扩展或移过容器

时间:2021-09-05 20:27:22

I have an issue (code is dynamic so difficult to print - I hope this is simple) whereby when a parent container div contains 3 div elements floated left, yet the if the 3rd div goes beyond the body of the page (i.e. the browser's width) it line breaks to go underneath.

我有一个问题(代码是动态的,很难打印 - 我希望这很简单),当父容器div包含3个div元素左侧浮动时,如果第3个div超出页面主体(即浏览器的宽度)它断线进入下面。

I want it to float: left whatever, whether it goes past the 'end of the browser' or not. Is this possible?

我想让它浮动:留下任何东西,无论它是否经过“浏览器的终点”。这可能吗?

Example code:-

示例代码: -

<div id="container"><div id="divLeft"></div><div id="divCenter"></div><div id="divRight"></div></div>

Where all the divs left, center and right are float: left;

所有的div都离开了,中间和右边是浮动的:左边;

Yet #divLeft will break to go under divCenter if it's width goes outside the browser width.

然而,如果#divLeft的宽度超出浏览器宽度,它将会在divCenter下运行。

Any help much appreciated!

任何帮助非常感谢!

2 个解决方案

#1


2  

The best way to be sure is to set a fixed width to your div here.

最好的方法是在这里为你的div设置一个固定的宽度。

An example here

这里有一个例子

#container{width:306px;display:block;border:1px solid black;overflow:auto;}
#divLeft, #divCenter,#divRight{float:left;border:1px solid red;width:100px;}

Don't forget the overflow:auto on your container if you want to apply a background or a border, else it won't be under your divs.

如果你想应用背景或边框,不要忘记你的容器上的溢出:自动,否则它不会在你的div下面。

#2


1  

it seems the divs don't fit in container div, and the last one floats under them. this is how float works. you must arrange the widths of them.

似乎div不适合容器div,最后一个浮在它们下面。这就是浮点运算的方式。你必须安排它们的宽度。

#1


2  

The best way to be sure is to set a fixed width to your div here.

最好的方法是在这里为你的div设置一个固定的宽度。

An example here

这里有一个例子

#container{width:306px;display:block;border:1px solid black;overflow:auto;}
#divLeft, #divCenter,#divRight{float:left;border:1px solid red;width:100px;}

Don't forget the overflow:auto on your container if you want to apply a background or a border, else it won't be under your divs.

如果你想应用背景或边框,不要忘记你的容器上的溢出:自动,否则它不会在你的div下面。

#2


1  

it seems the divs don't fit in container div, and the last one floats under them. this is how float works. you must arrange the widths of them.

似乎div不适合容器div,最后一个浮在它们下面。这就是浮点运算的方式。你必须安排它们的宽度。