浮动问题-宽度大于页面宽度时Divs下降

Question

缩写代码如下； 现场直播在这里： http : //www.nwitimes.com/app/100objects/index.php 。 代码中有100张图像，但是为了简洁起见，我将其缩短为10张。

我想发生的是使类.picholder的图像位于屏幕的右侧，并填充所有空白区域。 发生的是，如果我没有浮子，那么它们会堆叠100张图像。 如果我在.picholder中添加float：left，那么只要我不到达页面边缘，图像就会像我想要的那样平铺。 但是，如果我有七个以上的图像，它们都将落在左侧的div下。 （此div将保存一个表单，但我将图像用作占位符。）

我曾尝试给div设置宽度，但这没有用。 完成后，表单（左侧）将为350px宽，而picside占据了页面的其余部分。 如果小图像也位于表格下方，那很好。 我只是不想他们都在那里。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#container {width:100%;}
#formside {float:left; margin:0 50px 50px 0;}
#picside {float:left;border:5px solid #cfc;}
.picholder {width:150px; background-color:#EFEFEF; text-align:center; padding:5px; border:1px solid #DDD; height: 100px;}
</style>
</head>
<body>
<div id="container">
<div id="formside">
<img src="bigs/001.jpg" width="620" height="419">
</div>
<div id="picside">
<div class="picholder"><img src="smalls/001.jpg" width="148" height="100"></div>
<div class="picholder"><img src="smalls/002.jpg" width="147" height="100"></div>
<div class="picholder"><img src="smalls/003.jpg" width="67" height="100"></div>
<div class="picholder"><img src="smalls/004.jpg" width="150" height="100"></div>
<div class="picholder"><img src="smalls/005.jpg" width="143" height="100"></div>
<div class="picholder"><img src="smalls/006.jpg" width="150" height="100"></div>
<div class="picholder"><img src="smalls/007.jpg" width="149" height="100"></div>
<div class="picholder"><img src="smalls/008.jpg" width="70" height="100"></div>
<div class="picholder"><img src="smalls/009.jpg" width="150" height="100"></div>
<div class="picholder"><img src="smalls/010.jpg" width="125" height="100"></div>
</div>
</div>
</body>
</html>

我知道这个网站上有上千个浮动问题，而且我已经读了很多。 我还没有找到类似的情况。 谢谢你的帮助。

Answer 1

通过为每个主要元素设置百分比宽度，我成功了： .formside和.picside 。 我选择的百分比（60％和40％）总计为100％。

我不得不调整其他一些CSS，主要是添加box-sizing:border-box来调整box模型，以便填充和边框不会影响元素的宽度。

在这里，我将margin更改为padding并添加了width和box-sizing ：

#formside {
    float: left;
    padding: 0 50px 50px 0;
    width: 40%;
    box-sizing: border-box;
}

在这里，我为图像添加了max-width ，以便它可以通过#formside缩小，但不会超出其原始宽度：

#formside img {
    max-width:100%;
}

在这里，我添加了width和box-sizing ：

#picside {
    float: left;
    border: 5px solid #cfc;
    width: 60%;
    box-sizing: border-box;
}

然后，我重新浮动了所有.picholder元素：

.picholder {
    width: 150px;
    background-color: #EFEFEF;
    text-align: center;
    padding: 5px;
    border: 1px solid #DDD;
    height: 100px;
    float: left;
}

工作实例

编辑：

再次阅读您的问题后，这可能是一个更简单的示例（尽管可能不太漂亮）。 简单地漂浮.formside向左和删除.picside ，让所有的.picholder元素环绕.formside 。

工作实例

编辑：

实际上，如果固定左侧的宽度，则要简单得多。 只需浮动左侧，并在左侧给margin-left等于（或大于）左侧的宽度即可：

#formside {
    float: left;
    width: 350px
}
#formside img {
    max-width:100%;
}
#picside {
    margin-left:400px; /* Gives a 50px margin between left and right */
}

工作实例

浮动问题-宽度大于页面宽度时Divs下降

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-10-09 23:19:40

编辑：

编辑：

浮动问题-宽度大于页面宽度时Divs下降

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-10-09 23:19:40

编辑：

编辑：

解决方案1
1 已采纳 2014-10-09 23:19:40