Dreamweaver div大小

Question

我正在尝试用Dreamweaver创建我的第一个网站，但我遇到了一个似乎无法修复的问题。我有一个包含未排序列表的div，该列表的元素是翻转图像。有5个图像，所以我有3个在第一行，2个在第二行。它们的大小被调整为页面的特定百分比。

我希望div自动向下扩展到图像的底部行的末尾，我不想硬编码大小的值。我将div大小设置为auto，但它似乎无法识别未排序列表中的图像。它将自己的大小调整为0，因此所有图像都覆盖了div之后的所有内容。

如果我手动调整div的大小，它会解决这个问题，但我不确定我是否想这样做。

有没有办法在不硬编码div高度的情况下解决这个问题？

下面是翻转图像列表的html代码。

<div id="rolloverlocs">
  <ul>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','images/DenmanInfo.jpg',1)"><img src="images/Davie.jpg" alt="" width="" height="" id="Image1"></a></li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/DenmanInfo.jpg',1)"><img src="images/Kits.jpg" alt="" width="" height="" id="Image2"></a></li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/DenmanInfo.jpg',1)"><img src="images/Denman.jpg" alt="" id="Image3"></a></li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/DenmanInfo.jpg',1)"><img src="images/Kits.jpg" alt="" width="" height="" id="Image4"></a></li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','images/DenmanInfo.jpg',1)"><img src="images/Denman.jpg" alt="" width="" height="" id="Image5"></a></li>
</ul></div>

对于css样式表的这一部分..

#rolloverlocs ul {
    list-style-type: none;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    width: auto;
    display: block;
}
#rolloverlocs img {
    width: 31%;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    display: block;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    float: left;
    border-style: solid;
    border-color: #000000;
    background-color: #E5E9E2;
    height: auto;
}
#rolloverlocs {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    height: auto;
}

Answer 1

尝试添加此样式：

#rolloverlocs ul {
   overflow:hidden;
}

demo

或者，您可以使用以下命令：

html,body{
    width:100%;
}
*{
    margin:0; 
    padding:0;
}
#rolloverlocs ul {
    list-style: none;
    width: 100%;
    display: block;
    overflow:hidden;
}
#rolloverlocs li{
    display:block;
    float:left;
    width:33%;
}
#rolloverlocs a{
    display:block;
    width:100%;
    height:auto;
}
#rolloverlocs img {
    width:94%;
    margin:1%;
    display: block;
    background-color: #E5E9E2;
    height: auto;
    padding:2%;
}
#rolloverlocs {
    width:100%;
}