Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
avraal
9 / 9 / 5
Регистрация: 08.11.2014
Сообщений: 207
Записей в блоге: 1
#1

Позиционирование - HTML, CSS

14.06.2015, 10:47. Просмотров 307. Ответов 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
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Позиционирование (HTML, CSS):

Позиционирование - HTML, CSS
как правельно расположить html блоки и отпозиционировать чтобы получился такой вид 3 блок надо двумя

Позиционирование - HTML, CSS
Вот спозиционировал кратинку на экране, в стилях прописал. .foto{position:absolute; border:8px; border-color:red; ...

Позиционирование - HTML, CSS
Здравствуйте, думаю уже вас задолбили с этой темой, уверен, что на форуме есть ответ на мой вопрос, но увы я не нашел. Подскажите...

позиционирование - HTML, CSS
есть страница как сделать так, что бы вся информация размещалась на сером фоне?

Позиционирование - HTML, CSS
Здравствуйте. Надо чтобы див, оставался в центре экрана, даже если страницу прокручивают вниз, вверх. Как баннеры, возможно видели. Как так...

Позиционирование - HTML, CSS
Здравствуйте, Подскажите пожалуйста. Мне нужно расположить 6 фотографий, в 2 столбика, слева и справа от текста. Как это лучше сделать?

6
Mikhail Shell
50 / 50 / 24
Регистрация: 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 / 5
Регистрация: 08.11.2014
Сообщений: 207
Записей в блоге: 1
14.06.2015, 12:25  [ТС] #3
Примерно вот так
0
Миниатюры
Позиционирование  
evikza
371 / 223 / 118
Регистрация: 20.05.2015
Сообщений: 490
14.06.2015, 23:36 #4
avraal, костылевато конечно, но имеет место быть

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

http://codepen.io/evikza/pen/qdXmEv
0
avraal
9 / 9 / 5
Регистрация: 08.11.2014
Сообщений: 207
Записей в блоге: 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
Привет! Вот еще темы с ответами:

Позиционирование - HTML, CSS
Зачем использовать позицию relative? Я знаю, что если использовать данный метод позиционирования, то элементы считают, что блок стоит на...

Позиционирование - HTML, CSS
Добрый день Есть форма,как на первом скриншоте из вложения. При добавлении записи в таблицу &quot;Наименование товара&quot; боксы &quot;Изменение...

Позиционирование в IE - HTML, CSS
Здравствуйте.Код. &lt;html&gt; &lt;body&gt; &lt;div class=&quot;meny&quot;&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; html, body { margin:0; ...

позиционирование - HTML, CSS
Подскажите пожалуйста, как убрать отступ с правой стороны? body { background-image:url('../img/hex5.png'); ...


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

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

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