Как я могу CSS для списка / сетки в div с рамкой? - PullRequest
Новая
       26

Как я могу CSS для списка / сетки в div с рамкой?

0 голосов
/ 20 мая 2010

Я хочу создать таблицу списка в DIV с рамкой. Когда больше содержимого ширины столбца, то разрыв строки и граница увеличиваются, но граница другого столбца не увеличивается. см. пример:

Таблица CSS на основе Div 

        .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>

Кто-нибудь решит эту проблему?

1 Ответ

0 голосов
/ 20 мая 2010

Хорошо, так что я получил его на работу - вам нужно установить конкретную высоту в классе .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>

Надеюсь, это поможет! ^ _ ^ <(Enjoi) </p>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...