Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.09.2013, 17:33
Интересующийся
Отправить личное сообщение для Alexei91 Посмотреть профиль Найти все сообщения от Alexei91
 
Регистрация: 13.09.2013
Сообщений: 25

Помогите пожалуйста с нестандартной задачей css
Требуется расположить блоки таким образом как на кртинке. При этом нельзя использовать никакие отступы слева и справа.Надеюсь понятно объяснил
Изображения:
Тип файла: jpg Untitled-1.jpg (173.8 Кб, 19 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 13.09.2013, 21:41
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от Alexei91
Надеюсь понятно объяснил
Нет.
Сообщение от Alexei91
При этом нельзя использовать никакие отступы слева и справа
Это как?

Если с отступами, то можно так:
<style>
.container{
    width: 600px;
    outline: 1px solid red;
}
.grid{
    margin: 0 0 0 -30px;
    overflow: hidden;
}
.grid .item{
    width: 180px;
    height: 200px;
    margin:  0 0 30px 30px;
    float: left;
    background: blue;
}
</style>

<div class="container">
<div class="grid">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
</div>


Если блоки разной высоты, то display:inline-block
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #3 (permalink)  
Старый 14.09.2013, 01:23
Интересующийся
Отправить личное сообщение для Alexei91 Посмотреть профиль Найти все сообщения от Alexei91
 
Регистрация: 13.09.2013
Сообщений: 25

именно в этом и загвоздка, нельзя использовать margin и padding слева и справа для самиих блоков (для общего контейнера можно). Это вообще сложно объяснить
Ответить с цитированием
  #4 (permalink)  
Старый 14.09.2013, 03:58
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

А чем обусловлено такое странное требование?
Тогда только css3 flexbox (с ним еще не разбирался).
Или може быть через display:inline-block, а расстояние между блоками определить через указание ширины пробелов.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #5 (permalink)  
Старый 14.09.2013, 14:42
Интересующийся
Отправить личное сообщение для Alexei91 Посмотреть профиль Найти все сообщения от Alexei91
 
Регистрация: 13.09.2013
Сообщений: 25

Это тестовое задание на джуниора, я думаю решили поиздеваться походу-3 день сижу на форумах и штудирую интернет, попробую flexbox.Спасибо за подсказку.
Ответить с цитированием
  #6 (permalink)  
Старый 14.09.2013, 17:18
Профессор
Отправить личное сообщение для Яростный Меч Посмотреть профиль Найти все сообщения от Яростный Меч
 
Регистрация: 12.04.2010
Сообщений: 557

Может, сделать таблицу, cellspacing и т.д.?
Ответить с цитированием
  #7 (permalink)  
Старый 14.09.2013, 17:44
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Но тогда придется разибвать на строки.
Чтобы угодить заданию, можно место отступов можно тупо оборачивать блоки в контейнеры с шириной, немного большей, таким образом получим отступы.
<style>
.container{
    width: 600px;
    outline: 1px solid red;
}
.grid{
    display: table;
    width: 100%;
    border-spacing: 30px;
    margin: 0 -30px;
    table-layout: fixed;
}
.grid .row{
    display: table-row;
}
.grid .item{
    width: 180px;
    height: 200px;
    display: table-cell;
    vertical-align: top;
    background: blue;
}
</style>
 
<div class="container">
<div class="grid">
    <div class="row">
        <div class="item"></div>
        <div class="item"></div>
    <div class="item"></div>
    </div>
    <div class="row">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>
</div>
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #8 (permalink)  
Старый 15.09.2013, 13:26
Интересующийся
Отправить личное сообщение для Alexei91 Посмотреть профиль Найти все сообщения от Alexei91
 
Регистрация: 13.09.2013
Сообщений: 25

Эти все варианты хороши, но в резиновом шаблоне не смый лучший вариант.Спасибо за идеи.Наверно всё-таки напишу, что задание глупое, не возьмут на работу так и хрен с ними.
Ответить с цитированием
  #9 (permalink)  
Старый 15.09.2013, 14:59
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Можно ведь заменить пиксели на проценты.
Сообщение от Alexei91
Наверно всё-таки напишу, что задание глупое, не возьмут на работу так и хрен с ними.
Лучше предложи несколько вариантов, хоть каких нибудь. Это лучше чем сказать что они дураки )
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #10 (permalink)  
Старый 15.09.2013, 19:39
Профессор
Отправить личное сообщение для Яростный Меч Посмотреть профиль Найти все сообщения от Яростный Меч
 
Регистрация: 12.04.2010
Сообщений: 557

Сообщение от Alexei91
нельзя использовать margin и padding слева и справа для самиих блоков
а border можно?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите пожалуйста вычислить общую сумму katalizator Общие вопросы Javascript 15 22.03.2013 16:26
Помогите пожалуйста правильно написать скрипт raffx Events/DOM/Window 17 16.10.2012 20:31
помогите пожалуйста с задачей Маргарита1995 Общие вопросы Javascript 1 25.01.2011 23:09
Как подменять ФАЙЛ CSS при клике нассылку!!!! СРОЧНО ПОМОГИТЕ. pavdin Общие вопросы Javascript 4 02.12.2010 20:44
Помогите, пожалуйста, с простой задачей Devi Ваши сайты и скрипты 1 13.07.2010 04:48