Question

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

我想要发生的是将.picholder类的图像放在屏幕的右侧，填充所有的空白区域。会发生的是，如果我没有浮动它们，那么它们会叠加100张图像。如果我将float：left添加到.picholder，只要一个图像没有到达页面边缘，图像就像我想要的那样。但是，如果我有七个+图像，它们都会落在左边的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来调整框模型，这样填充和边框不会影响元素的宽度。

在此，我将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;
}

WORKING EXAMPLE

编辑：

再次阅读你的问题之后，这可能是一个更简单的例子（虽然可能不那么漂亮）。只需向左移动.formside并移除.picside，允许所有.picholder元素环绕.formside。

WORKING EXAMPLE

编辑：

实际上，如果左侧的宽度是固定的，那么它会非常简单。只需浮动左侧并将margin-left放在相当于（或大于）左侧宽度的右侧：

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

WORKING EXAMPLE

浮点问题 - 当宽度大于页面宽度时，Div下降

1 个答案:

编辑：

编辑：