怎么让DIV自己伸缩?_html/css_WEB-ITnose

WBOY
Release: 2016-06-21 09:47:45
Original
1334 people have browsed it

    <div style=" width:810px; background-color:#06F; min-height:210px;word-wrap:break-word;">    	<div style="width:200px; height:200px; background-color:#0F0; float:left;">1</div>        <div style="width:200px; height:200px; background-color:#0F0; float:left;">2</div>        <div style="width:200px; height:200px; background-color:#0F0; float:left;">3</div>        <div style="width:200px; height:200px; background-color:#0F0; float:left;">4</div>        <div style="width:200px; height:200px; background-color:#0F0; float:left;">5</div>        <div style="width:200px; height:200px; background-color:#0F0; float:left;">6</div>    </div>
Copy after login

让外面那个大的DIV自动伸缩高度,里面的小DIV走的是数据库,数量不一定,可能多,可能少。


回复讨论(解决方案)

外面加样式
overflow:hidden

不设置高度就可以吧,把那个min-height去掉试试?

       <div style=" width:810px; background-color:#06F; min-height:210px;word-wrap:break-word;">        <div style="width:200px; height:200px; background-color:#0F0; float:left;">1</div>        <div style="width:200px; height:200px; background-color:#0F0; float:left;">2</div>        <div style="width:200px; height:200px; background-color:#0F0; float:left;">3</div>        <div style="width:200px; height:200px; background-color:#0F0; float:left;">4</div>        <div style="width:200px; height:200px; background-color:#0F0; float:left;">5</div>        <div style="width:200px; height:200px; background-color:#0F0; float:left;">6</div>        <div style="clear:both;"></div>    </div>
Copy after login
Copy after login

在最后加一个div,做浮动清除,要不然父元素不会自动适应的。

       <div style=" width:810px; background-color:#06F; min-height:210px;word-wrap:break-word;">        <div style="width:200px; height:200px; background-color:#0F0; float:left;">1</div>        <div style="width:200px; height:200px; background-color:#0F0; float:left;">2</div>        <div style="width:200px; height:200px; background-color:#0F0; float:left;">3</div>        <div style="width:200px; height:200px; background-color:#0F0; float:left;">4</div>        <div style="width:200px; height:200px; background-color:#0F0; float:left;">5</div>        <div style="width:200px; height:200px; background-color:#0F0; float:left;">6</div>        <div style="clear:both;"></div>    </div>
Copy after login
Copy after login

在最后加一个div,做浮动清除,要不然父元素不会自动适应的。
我擦这是为什么???

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!