Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
PHP. Практика создания Web-сайтов (второе издание). Авторы: Кузнецов М.В., Симдянов И.В. Программирование. Ступени успешной карьеры. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель MySQL 5. Авторы: Кузнецов М.В., Симдянов И.В. Социальная инженерия и социальные хакеры. Авторы: Кузнецов М.В., Симдянов И.В. PHP на примерах (2 издание). Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: разбить на колонки
 
 автор: kaoz   (06.06.2006 в 10:06)   письмо автору
 
 

есть
такой код:

<div id="border">
    <div>
        text<br />
        text<br />
        text<br />
        text<br />
        text<br />
    </div>
    <div>
        text<br />
        text<br />
        text<br />
        text<br />
        text<br />
    </div>
    <div>
        text<br />
        text<br />
        text<br />
        text<br />
        text<br />
    </div>
</div>

такой код выводиться в блоке построчно
как сделать так чтобы дивы в диве выводились как колонки таблицы...
причем так что если колонка не помещается блоке она переноситься на следующую строку.

кол-во вложенных дивов неограничено

   
 
 автор: AlexSol   (06.06.2006 в 10:57)   письмо автору
 
   для: kaoz   (06.06.2006 в 10:06)
 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Untitled Document</title>
<style>
.cl{ border:1px solid red;  display:block; float:left}

</style>
</head>

<body>
<div id="border"> 
    <div class="cl"> 
        text1<br /> 
        text1<br /> 
        text1<br /> 
        text1<br /> 
        text1<br /> 
    </div> 
    <div class="cl"> 
        text2<br /> 
        text2<br /> 
        text2<br /> 
        text2<br /> 
        text2<br /> 
    </div> 
    <div class="cl"> 
        text3<br /> 
        text3<br /> 
        text3<br /> 
        text3<br /> 
        text3<br /> 
    </div> 
</div> 
</body>
</html>

   
 
 автор: kaoz   (06.06.2006 в 11:24)   письмо автору
 
   для: AlexSol   (06.06.2006 в 10:57)
 

сделал как вы посоветовали:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Добавить пользователя</title>
<style type="text/css">
<!--
input
  {
    position:absolute;
    left:120px;
    width:145px;
  }
.submit
  {
    width:150px;
  }
#message
  {
    background-color    : #CCCCCC;
    border-width        : 1px;
    border-color        : #000000;
    border-style        : solid;
    padding-top            : 5px;
    padding-bottom        : 5px;
    padding-left        : 10px;
    padding-right        : 5px;
  }
#border
  {
    background-color    : #EEEEEE;
    border-width        : 1px;
    border-color        : #000000;
    border-style        : solid;
    border-top            : none;
    padding-top            : 10px;
    padding-bottom        : 10px;
    padding-left        : 10px;
    padding-right        : 10px;
  }
#col_0, #col_1
  {
    border                : 1px solid red;
    display                : block;
    float                : left
  }
-->
</style></head>

<body>
<div id="message">
<b>Ё</b>
</div>
<div id="border">
    <div id="col_0">
        текст<br />
        текст<br />
        текст<br />
        текст<br />
    </div>
    <div id="col_0">
        текст<br />
        текст<br />
        текст<br />
        текст<br />
    </div>
</div>
<div id="border">
    <div id="col_1">
        текст<br />
        текст<br />
    </div>
    <div id="col_1">
        текст<br />
        текст<br />
    </div>
    <div id="col_1">
        текст<br />
        текст<br />
    </div>
    <div id="col_1">
        текст<br />
    </div>
</div>
</body>
</html>


чето неработает... где может быть ошибка?

надо чтоб блок "border" растягивался вместе с текстом в этом блоке.

и еще такой вопрос, можно ли указать определенную ширину вложенного дива?

   
 
 автор: AlexSol   (06.06.2006 в 11:51)   письмо автору
 
   для: kaoz   (06.06.2006 в 11:24)
 


<style type="text/css"> 
<!-- 
input { 
    position:absolute; 
    left:120px; 
    width:145px; 
 } 
.submit { 
    width:150px; 

#message { 
    background-color: #CCCCCC; 
    border: 1px solid #000000; 
    padding: 5px 10px 5px 5px; 

#border { 

    border: 1px solid #000000; 
    background: #EEEEEE; 
    border-top: none; 
    padding: 10px; 
    display : block; 
    margin:0;
    float: left;
    width:47%; 

#col_0, #col_1 { 
    border: 1px solid red; 
    display : block; 
    float: left 

--> 
</style>


эксперементируйте...

   
 
 автор: kaoz   (06.06.2006 в 16:30)   письмо автору
 
   для: AlexSol   (06.06.2006 в 11:51)
 

пасибо... наконец-таки с float разобрался :)

   
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования