Question

我想在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>

有人解决了这个问题吗？

Answer 1

好的，所以我让它工作 - 你需要在.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>

我希望有所帮助！ ^ _ ^＆lt;（Enjoi）

如何用带边框的div中的列表/网格CSS？

1 个答案: