фиксированный div

@romeo753 · Регистрация: 15.12.2012

Студворк — интернет-сервис помощи студентам

Проблема такова: надо расположить несколько div в таком порядке, у кого есть предложение, как это можно совершить? таблица однозначна отпадает)

вот мой вариант!

HTML5
1
2
3
4
5
6
7
8
9
10
<div class"cont">
  <div class="con"><img src="Pictures/zr-7.png" width="109" height="97"></div>
    <div class="con1">Хочу выбрать мастера самостоятельно</div>
       <div class="con2">
         Хочу разместить заказ на работы самостоятельно</div>
       <div class="con3"><img src="Pictures/zr-8.png" width="30" height="26"></div>
    <div class="con4"><img src="Pictures/zr-8.png" width="30" height="26"></div>
    <div class="con5"><img src="Pictures/zr-11.png" width="137" height="27"></div>
   <div class="con6"><img src="Pictures/zr-12.png" width="137" height="27">
  </div><!-- end .cont--></div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
.con{
    width: 109px; 
    padding: 3px;
    padding-right: 10px; 
    float: left;
    margin-top: 30px; 
    }
    .con1{
    width: 360px; 
    float: left; 
    position: relative; 
    top: 30px; 
    left: -0px; 
    }
    .con2{
    width: 490px; 
    float: left; 
    position: relative;
    top: 45px; 
    left: -0px; 
    }
    .con3{
    width: 30px; 
    float: left; 
    position: relative; 
    top: 5px; 
    left: -128px;
    }
    .con4{
    width: 30px;
    float: left;
    position: relative;
    top: 45px;
    left: -27px;
    }
    .con5{
    width: 137px; 
    float: left; 
    position: relative; 
    top: 4px; 
    left: -118px;
    }
    .con6{
    width: 137px; 
    float: left; 
    position: relative; 
    top: 45px; 
    left: -130px;
    }

@Rodion2703 · 11.01.2013, 20:32

див - <div>

Здрасте. Во первых текст не в див обычно вставляют, а в span (то же самое, почти). Потом на счет этого:

1. Создать див который будет в себе хранить все другие дивы и поставить ширину (обязательно)
2. Потом у левого самого блока поставить высоту в пикселях
3. Дальше у всех других блоков поставить ширину в процентах (обратите внимание что в сумме должно получиться не 100%, а по меньше, если вы будете использовать отступы)
4. Все верхние блоки поместить в блок (и нижние, только нижние в отдельный) и прописать этому блоку:

HTML5
1
valign: top;

(css:

CSS
1
vertical-align: top;

)

@romeo753 · 11.01.2013, 23:07 **[ТС]**

А по подробнее можно? что то не врубаюсь)

1.Делаю родительский div назову его грубо говоря <div class="1">

2.В нем делаю все остальные Div

3.верние горизонтальные три блока нужно поместить в дополнительный родительский <div class="2">

4. с нижними тремя проделываем тоже самое поместить в дополнительный род. <div class="3">

5. между 3,4 будет находится левый блок.

6. </div>

Правильно изложил?

@Rodion2703 · 12.01.2013, 23:39

А почему Вы не ходите делать через таблицу?

@RomanF · 16.01.2013, 13:57

А зачем один див для всех ? почему не вставить четыре блока и потом в второй третий и четверный поместить еще по два , Или это из "быдлокода" ? ясамоучка , могу ошибатся...

@sandik · 27.01.2013, 01:16

RomanF, Див один на все из-за того что у каждого разное разрешения экрана, просто один общий
можно спозиционировать(разместить по центру), а потом с остальными можно делать что угодно.

Новые блоги и статьи Все статьи Все блоги /
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .
Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .

@romeo753 0 / 0 / 0 Регистрация: 15.12.2012 Сообщений: 44
	11.01.2013, 23:07 [ТС]
	А по подробнее можно? что то не врубаюсь) 1.Делаю родительский div назову его грубо говоря <div class="1"> 2.В нем делаю все остальные Div 3.верние горизонтальные три блока нужно поместить в дополнительный родительский <div class="2"> 4. с нижними тремя проделываем тоже самое поместить в дополнительный род. <div class="3"> 5. между 3,4 будет находится левый блок. 6. </div><!--end .1--> Правильно изложил? 0

@Rodion2703 24 / 20 / 5 Регистрация: 06.01.2013 Сообщений: 819
	12.01.2013, 23:39
	А почему Вы не ходите делать через таблицу? 0

@RomanF 0 / 0 / 0 Регистрация: 16.01.2013 Сообщений: 22
	16.01.2013, 13:57
	А зачем один див для всех ? почему не вставить четыре блока и потом в второй третий и четверный поместить еще по два , Или это из "быдлокода" ? ясамоучка , могу ошибатся... 0

@sandik 2 / 2 / 1 Регистрация: 26.01.2013 Сообщений: 9
	27.01.2013, 01:16
	RomanF, Див один на все из-за того что у каждого разное разрешения экрана, просто один общий можно спозиционировать(разместить по центру), а потом с остальными можно делать что угодно. 0