0

我想在带边框的 DIV 中创建一个列表。当列宽的内容更多时，换行符和边框会增加，但其他列的边框不会增加。看例子：

基于 div 的 CSS 表 

        .list_container{
            float:left;
            width: 550px;
            margin-bottom:10px;
            font-family: vardana;
        }

        .list_row{
            float:left;
            width: 548px;
            border-bottom:1px #9F9F9F solid;

        }
        .list_row:hover{
            background-color:#CCCCCC;
        }
        .list_rowHeader{
            float:left;
            width: 548px;
            border-bottom:1px #9F9F9F solid;
            border-top:1px #9F9F9F solid;
            font-weight: bold;
            background-color: #FF0000;
            color: #FFFFFF;
        }
        .list_column{
            float:left;
            padding: 3px;
            border-left: 1px #9F9F9F solid;
        }

        .list_columnLast{
            float:left;
            padding: 3px;
            border-left: 1px #9F9F9F solid;
            border-right: 1px #9F9F9F solid;
        } 

        .even{ background-color:#E0E0E0!important;}
        .odd{ background-color:#FFFFFF!important;}
    </style>
</head>

<body>      
    <div class="list_container"  >
        <div class="list_rowHeader" >
            <div class="list_column" style="width: 250px;">Name</div>
            <div class="list_column" style="width: 96px;"> Bid Amount</div>
            <div class="list_columnLast" style="width: 180px;"> Email </div>
        </div> 
        <div class="list_row even" >
            <div class="list_column" style="width: 250px;">Saidul Haque</div>
            <div class="list_column" style="width: 96px;"> 2131231</div>
            <div class="list_columnLast" style="width: 180px;"> saiduleye@gmail.com</div>
        </div> 
        <div class="list_row odd" >
            <div class="list_column" style="width: 250px;">Saidul Haque, Sonargaon, Bangladesh Dhaka, </div>
            <div class="list_column" style="width: 96px;"> 2131231</div>
            <div class="list_columnLast" style="width: 180px;"> saiduleye@gmail.com</div>
        </div>
        <div class="list_row even" >
            <div class="list_column" style="width: 250px;">Saidul Haque</div>
            <div class="list_column" style="width: 96px;"> 2131231</div>
            <div class="list_columnLast" style="width: 180px;"> saiduleye@gmail.com</div>
        </div>
    </div>
</body>

有人解决这个问题吗？

4

1 回答 1

0

好的，所以我让它工作了 - 你需要在 .list_column 类上设置一个特定的高度：（我添加了一个 DOCTYPE 并且你的 CSS/INLINE 样式的格式稍微好一些）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.list_container{
    float:left;
    width: 548px;
    margin-bottom:10px;
    font-family: vardana;
    border: 1px #9F9F9F solid;
}

.list_row{
    float:left;
    width: 548px;
    border-bottom:1px #9F9F9F solid;
}
.list_row:hover{
    background-color:#CCCCCC;
}
.list_rowHeader{
    float:left;
    width: 548px;
    font-weight: bold;
    background-color: #FF0000;
    color: #FFFFFF;
}
.list_column{
    float:left;
    width: 250px;
    /* height: 50px; /* Need a height - UNCOMMENT */
    /* min-height: 50px; /* Need a height - UNCOMMENT  */
    padding-left: 3px;
    padding-right: 3px;
    border-right: 1px #9F9F9F solid;
}

.list_columnLast{
    float:left;
    padding: 3px;
    width: 180px;
} 

.even{ background-color:#E0E0E0!important;}
.odd{ background-color:#FFFFFF!important; }
</style>
</head>

<body>      
    <div class="list_container">
        <div class="list_rowHeader">
            <div class="list_column">Name</div>
            <div class="list_column" style="width: 96px;"> Bid Amount</div>
            <div class="list_columnLast"> Email </div>
        </div> 
        <div class="list_row even">
            <div class="list_column">Saidul Haque</div>
            <div class="list_column" style="width: 96px;"> 2131231</div>
            <div class="list_columnLast"> saiduleye@gmail.com</div>
        </div> 
        <div class="list_row odd">
            <div class="list_column">Saidul Haque, Sonargaon, Bangladesh Dhaka,</div>
            <div class="list_column" style="width: 96px;"> 2131231</div>
            <div class="list_columnLast"> saiduleye@gmail.com</div>
        </div>
        <div class="list_row even">
            <div class="list_column">Saidul Haque</div>
            <div class="list_column" style="width: 96px;"> 2131231</div>
            <div class="list_columnLast"> saiduleye@gmail.com</div>
        </div>
    </div>
</body>

我希望这会有所帮助！^_^ <（享受）

于 2010-05-20T09:03:50.073 回答