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%;
}

Dreamweaver div大小

1 个答案: