Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/11: Рейтинг темы: голосов - 11, средняя оценка - 5.00
0 / 0 / 0
Регистрация: 13.10.2013
Сообщений: 2
1

а как тут расположить блоки 4 блока внутри одного

13.10.2013, 12:57. Просмотров 1895. Ответов 3
Метки нет (Все метки)

0
Миниатюры
а как тут расположить блоки 4 блока внутри одного  
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
13.10.2013, 12:57
Ответы с готовыми решениями:

Как правильно расположить текст внутри блока?
Предположим у меня есть блок: <div class="obsh"> <div class="text1"></div> <div...

Сверстать три блока внутри одного
Здравствуйте В общем необходимо сверстать так чтобы: Текст был слева Точки по середине,...

Вертикальное выравнивание одного блока внутри другого с заданное высотой
Интересует следующий вопрос, можно ли сделать так что бы в такой конструкции: <div...

Как расположить блоки?
Не могу частично спрятать два синих блока. Надо так: Получилось так:

3
3 / 3 / 0
Регистрация: 08.10.2013
Сообщений: 16
13.10.2013, 14:44 2
HTML5
1
2
3
4
5
6
<div>
  <div></div>
  <div></div>
  <div> </div>
  <div></div>
</div>
0
0 / 0 / 0
Регистрация: 13.10.2013
Сообщений: 2
13.10.2013, 15:07  [ТС] 3
имею в виду чтобы они были друг под другом в css
0
9 / 9 / 0
Регистрация: 11.09.2013
Сообщений: 23
13.10.2013, 18:52 4
HTML5
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
<div class="main">
 
  <div class="block-main">
    <div class="block">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer hendrerit dui eget vulputate consequat. Curabitur et convallis orci, ut placerat dolor. Ut quis dui sit amet turpis sagittis sodales. Nunc pulvinar nibh tellus, quis sollicitudin tortor dignissim tristique. Pellentesque pretium placerat risus vitae porta. Nunc tincidunt massa sit amet nisl imperdiet, vitae lobortis mi lobortis. Pellentesque at nunc lobortis, bibendum lorem sit amet, vehicula quam. Praesent sed diam sed leo fringilla tincidunt et sed arcu. Proin non ante lobortis, imperdiet nisi sed, luctus velit. Sed turpis orci, lobortis in porta non, luctus eu mi. 
    </div>
  </div>
    
  <div class="block-main">
    <div class="block">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer hendrerit dui eget vulputate consequat. Curabitur et convallis orci, ut placerat dolor. Ut quis dui sit amet turpis sagittis sodales. Nunc pulvinar nibh tellus, quis sollicitudin tortor dignissim tristique. Pellentesque pretium placerat risus vitae porta. Nunc tincidunt massa sit amet nisl imperdiet, vitae lobortis mi lobortis. Pellentesque at nunc lobortis, bibendum lorem sit amet, vehicula quam. Praesent sed diam sed leo fringilla tincidunt et sed arcu. Proin non ante lobortis, imperdiet nisi sed, luctus velit. Sed turpis orci, lobortis in porta non, luctus eu mi. 
    </div>
  </div>
  
  <div class="block-main">
    <div class="block">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer hendrerit dui eget vulputate consequat. Curabitur et convallis orci, ut placerat dolor. Ut quis dui sit amet turpis sagittis sodales. Nunc pulvinar nibh tellus, quis sollicitudin tortor dignissim tristique. Pellentesque pretium placerat risus vitae porta. Nunc tincidunt massa sit amet nisl imperdiet, vitae lobortis mi lobortis. Pellentesque at nunc lobortis, bibendum lorem sit amet, vehicula quam. Praesent sed diam sed leo fringilla tincidunt et sed arcu. Proin non ante lobortis, imperdiet nisi sed, luctus velit. Sed turpis orci, lobortis in porta non, luctus eu mi. 
    </div>
  </div>
  
  <div class="block-main">
    <div class="block">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer hendrerit dui eget vulputate consequat. Curabitur et convallis orci, ut placerat dolor. Ut quis dui sit amet turpis sagittis sodales. Nunc pulvinar nibh tellus, quis sollicitudin tortor dignissim tristique. Pellentesque pretium placerat risus vitae porta. Nunc tincidunt massa sit amet nisl imperdiet, vitae lobortis mi lobortis. Pellentesque at nunc lobortis, bibendum lorem sit amet, vehicula quam. Praesent sed diam sed leo fringilla tincidunt et sed arcu. Proin non ante lobortis, imperdiet nisi sed, luctus velit. Sed turpis orci, lobortis in porta non, luctus eu mi. 
    </div>
  </div>
  
</div> <!-- END .main -->
CSS
1
2
3
4
5
6
7
8
9
10
.main { width: 600px; overflow:hidden;}
 
.block-main { float: left; width: 50%; }
 
.block { 
background: #ecedee; 
border: 2px solid #999;
padding: 20px;
margin: 20px;
}
Все значения: ширину, рамки, поля, отступы и цвета - конечно же подставляете свои.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
13.10.2013, 18:52

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

как расположить блоки?
Доброго времени суток! Есть 4 блока - два сверху, два снизу. &lt;div class=&quot;container&quot;&gt; &lt;div...

Как расположить блоки по ширине?
Собственно имеется 4 блока в одном родительском. Требуется сделать так, чтобы эти 4 div...

Как расположить блоки на Bootstrap?
Как расположить блоки на Bootstrap что бы они «прилипали» друг к другу по вертикали и сохранили...

Как правильно расположить блоки?
Как правильно расположить блоки, схема которых показана на рисунке. Задача не сложная, я сам...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.