Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

Имитирование таблицы с помощью <div>

Обсуждение темы Имитирование таблицы с помощью <div> в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Хочу получить таблицу из 6 столбцов, шириной 600px (по 100px каждый). Есть такой фрагмент кода. Но в результате получается таблица с 1 столбцом, ...


Закрытая тема
 
Опции темы
Старый 24.04.2011, 19:38   #1
Хочу получить таблицу из 6 столбцов, шириной 600px (по 100px каждый). Есть такой фрагмент кода. Но в результате получается таблица с 1 столбцом, т.е. все элементы располагаются друг под другом. Помогите исправить, плз.


Цитата:
<div style="width: 600px;">
<div style="width: 100px; float: center; border: 1px solid black; text-align: center;"><img src="картинка 1.jpg" style="float: center; margin: 5px;" />
<p>Подпись под картинкой 1</p>
</div>
<div style="width: 100px; float: center; border: 1px solid black; text-align: center;"><img src="картинка 2.jpg" style="float: center; margin: 5px;" />
<p>Подпись под картинкой 2</p>
</div>
<div style="width: 100px; float: center; border: 1px solid black; text-align: center;"><img src="картинка 3.jpg" style="float: center; margin: 5px;" />
<p>Подпись под картинкой 3</p>
</div>
<div style="width: 100px; float: center; border: 1px solid black; text-align: center;"><img src="картинка 4.jpg" style="float: center; margin: 5px;" />
<p>Подпись под картинкой 4</p>
</div>
<div style="width: 100px; float: center; border: 1px solid black; text-align: center;"><img src="картинка 5.jpg" style="float: center; margin: 5px;" />
<p>Подпись под картинкой 5</p>
</div>
<div style="width: 100px; float: center; border: 1px solid black; text-align: center;"><img src="картинка 6.jpg" style="float: center; margin: 5px;" />
<p>Подпись под картинкой 6</p>
</div>
<div style="width: 100px; float: center; border: 1px solid black; text-align: center;"><img src="картинка 7.jpg" style="float: center; margin: 5px;" />
<p>Подпись под картинкой 7</p>
</div>
</div>​
 
Старый 24.04.2011, 19:38
Ссылки
Старый 25.04.2011, 08:47   #2
Цитата:
float: center;
css 4.0? )) флотать можно только вправо или влево
для всех дивов float: left/
+ вы не умеете считать? вы обернули 7 дивов шириной по 100px в один, шириной 600.
 
Старый 25.04.2011, 09:03   #3
вот кусок - я делал для себя. тут 3 колонки. по аналогии можно лепить любое воличество.
<div style="position:relative;width:100%;overflow: hidden;">
<div id="col_l" style="position:relative;float:left;display: inline;"></div>
<div id="col_c" style="position:relative;float:left;display: inline;"></div>
<div id="col_r" style="position:relative;float:left;display: inline;"></div>
</div>

Добавлено через 1 минуту

оборачивать во внешний див - обязательно.

Последний раз редактировалось redreem; 25.04.2011 в 09:03.. Причина: Добавлено сообщение
 
Старый 25.04.2011, 10:17   #4
Цитата:
Сообщение от redreem Посмотреть сообщение

оборачивать во внешний див - обязательно.
обязательно. вот только у вас внешний див width="600px"
и 7 внутренних дивов width="100px"

7*100=700>600 улавливаете суть?

короче css
Цитата:
.container {
margin-left: auto;
margin-right: auto;
width: 700px;
}

.grid,
{
display:inline;
float: left;
position: relative;
margin-left: 0px;
margin-right: 0px;
}

.container .grid {
width:100px;
}

.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}

и html
Цитата:
<div class="container">
<div class="grid">1</div>
<div class="grid">2</div>
<div class="grid">3</div>
<div class="grid">4</div>
<div class="grid">5</div>
<div class="grid">6</div>
<div class="grid">7</div>
<div class="clear"></div>
</div>

Последний раз редактировалось vladendark; 25.04.2011 в 10:20..
 
Этот пользователь сказал спасибо vladendark за это полезное сообщение:
coffe_drinker (25.04.2011)
Старый 25.04.2011, 18:15   #5
vladendark если человек думает, то с ширИнами он уж разберется - принципиальный момент - правильная расстановка floatoв и display:inline у внутренних и overflow: hidden у внешнего.
 
Старый 25.04.2011, 19:33   #6
Цитата:
Сообщение от vladendark Посмотреть сообщение
css 4.0? )) флотать можно только вправо или влево
для всех дивов float: left/
+ вы не умеете считать? вы обернули 7 дивов шириной по 100px в один, шириной 600.
7-й див перенесеться на новую строку, что мне и нужно, так что тут все норм. только ширину рамки не посчитал

а за float спасибо большое))
 
Старый 25.04.2011, 19:33
Закрытая тема

Метки
div, таблица


Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Миникалькулятор с помощью JS Dejust HTML, CSS, JavaScript 13 13.09.2009 08:03
таблицы внутри таблицы pasha_welt HTML, CSS, JavaScript 4 11.12.2006 20:12
Скрытие строки таблицы с помощью Js ECorWar ASP, Perl, PHP и MySQL 0 10.11.2006 17:46
Позиционирование <div> с помощью css KUZEN HTML, CSS, JavaScript 5 11.07.2006 13:41
С помощью чего??? ivan341 Растровая графика 9 16.11.2005 16:49


Текущее время: 12:56. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Тарифный план «Lite»
Место: 1000 Мб
Трафик: неограниченный
Панель управления
Заказать ТП «Lite»
Тарифный план «Normal»
Место: 2000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Normal»
Тарифный план «Profy»
Место: 7000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Profy»
Тарифный план «Места хватит!»
Место: 25 ГБ
Трафик: неограниченный
Поддержка SSI, ssh
Заказать ТП «Места хватит!»
Дизайнерский форум