我怎樣才能CSS列表/網格與邊界div？

我想用邊框在DIV中創建一個列表表格。當一個列的寬度更多的內容，然後換行和邊框增加，但其他列的邊框不增加。看例子：我怎樣才能CSS列表/網格與邊界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;"> [email protected]</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;"> [email protected]</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;"> [email protected]</div> 
     </div> 
    </div> 
</body>

有人解決這個問題？

來源

2010-05-20 Saidul Haque Nayan

好的，所以我得到它的工作 - 你需要在.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"> [email protected]</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"> [email protected]</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"> [email protected]</div> 
     </div> 
    </div> 
</body>

我希望有幫助！^_^<（Enjoi）

來源

2010-05-20 09:03:50

感謝您的回答。在這段代碼中有同樣的問題。假設內容高度出口50出現相同的問題時 – 2010-05-21 06:49:47

您是否取消了.list-column部分中的「高度」行註釋？ – 2010-05-21 08:09:47

我怎樣才能CSS列表/網格與邊界div？

回答

相關問題