0

记住： 想象一下这些元素在屏幕上的行为：当屏幕上有超过 100 个元素时<div>使用样式。float: left; height: 100px; width: 100px当您将窗口大小调整为低宽度时：div 将被向下推

示例 http://1lj.net/ex2.html

我需要什么： 我需要子 div 像链接的示例一样，问题是它们位于固定宽度的容器中。例如。<div class=container style="width:800px">

如何获得这种行为？

对不起我的英语，用非母语写真的很难。

4

2 回答 2

2 
<div style="float:left;width:500px"></div><div style="float:left;width:500px"></div>

会变成 ...

 <div style="float:left;width:500px"></div>
 <div style="float:left;width:500px"></div>  ( like text wraps)

...当窗口大小不足以容纳它们时

为防止这种情况，请添加一个具有宽度的容器...

 <div style="width:1000px">
  <div style="float:left;width:500px"></div><div style="float:left;width:500px"></div>
 </div>
  • 仅使用内联样式以方便演示

更新为注释：对于非固定宽度，相同，但使用百分比

  <div style="width:100%">
  <div style="float:left;width:50%"></div><div style="float:left;width:50%"></div>
 </div>
于 2012-05-17T22:03:00.343 回答
1

你需要两个容器。一个容器用于最大宽度，另一个用于容纳盒子。

CSS：

.container
{
    height:auto;
    max-width: 800px;
    margin: 0 auto;
    background-color: #666666;
}

.containercontent {
    position: relative;
    width: auto;
    margin: 0 auto;
}

HTML：

<div class="container"> <!-- Add this container -->
<div class="containercontent">

<h2>Lalalalal.</h2>

<div class="box" id=box1></div>
<div class="box" id=box2></div>
<div class="box" id=box3></div>
<div class=box id=box4></div>
<div class=box id=box5></div>
<div class=box id=box6></div>
<div class=box id=box7></div>
<div class=box id=box8></div>
<div class=box id=box9></div>
<div class=box id=box10></div>
<div class=box id=box11></div>
<div class=box id=box12></div>
<div class=box id=box13></div>
<div class=box id=box14></div>
<div class=box id=box15></div>
<div class=box id=box16></div>
<div class=box id=box17></div>
<div class=box id=box18></div>
<div class=box id=box19></div>
<div class=box id=box20></div>

</div>
<div class="clean"></div>
</div>
于 2012-05-17T23:23:23.873 回答