С наступающим Новым годом! Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
avraal
9 / 9 / 8
Регистрация: 08.11.2014
Сообщений: 213
Записей в блоге: 1
1

Позиционирование

14.06.2015, 10:47. Просмотров 318. Ответов 6
Метки нет (Все метки)

Есть такая нарезка кода html:
HTML5
1
2
3
4
5
6
<article class="portfolio">
          <div class="block"></div>
          <div class="block"></div>
          <div class="block"></div>
          <div class="block"></div>
</article>
И css:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.portfolio{
    display: table;
    height: 396px;
    background: #af6464;
    width: 100%;
}
.block{
    float: left;
    margin-right: 16px;
    margin-top: 74px;
    margin-bottom: 74px;
    position: relative;
    left:270px;
    right: 270px;
    width: 282px;
    height: 215px;
    background: aquamarine;
}
.portfolio - блок, в котором находятся 4 блока .block
Как правильно записать, чтобы при увеличении страницы они нормально отображались, то есть не вылазили за пределы страницы?
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
14.06.2015, 10:47
Ответы с готовыми решениями:

позиционирование
Подскажите пожалуйста, как убрать отступ с правой стороны? body { ...

Позиционирование
Здравствуйте, Подскажите пожалуйста. Мне нужно расположить 6 фотографий, в 2...

Позиционирование
как правельно расположить html блоки и отпозиционировать чтобы получился такой...

Позиционирование
Здравствуйте. Надо чтобы див, оставался в центре экрана, даже если страницу...

Позиционирование
Вот спозиционировал кратинку на экране, в стилях прописал. ...

6
Mikhail Shell
50 / 50 / 39
Регистрация: 15.11.2014
Сообщений: 626
14.06.2015, 12:13 2
avraal, я бы не советовал вам прописывать к элементу position и float одновременно. Это вообще нельзя делать.
Цитата Сообщение от avraal Посмотреть сообщение
Как правильно записать, чтобы при увеличении страницы они нормально отображались, то есть не вылазили за пределы страницы?
Немного непонятно без наглядного примера. Киньте ссылку или скрин при увеличении масштаба.

Цитата Сообщение от avraal Посмотреть сообщение
left:270px;
right: 270px;
Цитата Сообщение от avraal Посмотреть сообщение
margin-right: 16px;
margin-top: 74px;
margin-bottom: 74px;
Должны быть либо координаты, либо margin'ы
0
avraal
9 / 9 / 8
Регистрация: 08.11.2014
Сообщений: 213
Записей в блоге: 1
14.06.2015, 12:25  [ТС] 3
Примерно вот так
0
Миниатюры
Позиционирование  
evikza
393 / 244 / 161
Регистрация: 20.05.2015
Сообщений: 517
14.06.2015, 23:36 4
avraal, костылевато конечно, но имеет место быть

http://codepen.io/evikza/pen/xGLwYg
1
avraal
9 / 9 / 8
Регистрация: 08.11.2014
Сообщений: 213
Записей в блоге: 1
14.06.2015, 23:57  [ТС] 5
Ну, вообще, лучше
0
evikza
393 / 244 / 161
Регистрация: 20.05.2015
Сообщений: 517
15.06.2015, 21:22 6
вот кстати хороший вариант на flex, ширина только резиновая

http://codepen.io/evikza/pen/qdXmEv
0
avraal
9 / 9 / 8
Регистрация: 08.11.2014
Сообщений: 213
Записей в блоге: 1
15.06.2015, 22:01  [ТС] 7
Не, прошлый вариант лучше был
0
15.06.2015, 22:01
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
15.06.2015, 22:01

Позиционирование
Добрый день Есть форма,как на первом скриншоте из вложения. При добавлении...

Позиционирование
Зачем использовать позицию relative? Я знаю, что если использовать данный метод...

Позиционирование
Здравствуйте, возможно задам совершенно глупый вопрос, но я новичок и мне важно...


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

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

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