Недавно начал верстку сайта по аналогии с другим и мне необходимо было аналогично расположить блоки, но до конца не вышло. Не подскажите что мне поправить, чтобы было как задумано?
1. Копируйте тщательней. Не нужно заменять display:inline-block на float:left. Это сделано не просто так (подсказка vertical-align:top).
Вот вам картинка для понимания:
2. Вам нужно следить за размерами контента в разделённых блоках. Либо квадратная картинка с шириной 100%, либо как в оригинале paddint-top:100% (задумайтесь, почему) и внутренний контент, выпадающий из нормального потока.
На том сайте что Вы в пример приводите блоки main_block одинаковой высоты и создаётся впечатление что они разбросаны, а на самом деле там одинаковые по высоте и ширине стоят друг за другом.
Вам с Вашей же задумкой следует создать два блока width 50% - это колонки и уже в колонках вставлять блоки main_block
Спасибо за ваш ответ. Сделал немного по другому и блоки встали как надо, но появился один момент.
Если я просто вставлю картинку в блок, то она не будет тянуться по вертикали, мне приходится вырезать нужного размера картинки и тогда все работает как надо.
Как думаете, в чем проблема?
@Chasing во первых для product-link { display: block; } Во вторых вам нужно прописать высоту в px (статичную а не резиновую). Потом Вам блок product не нужен, можете его убрать и присвоить класс product для ссылки которая в нём. - нам лишний блок тут не нужен. vertical-align: middle; для картинки тоже ни к чему. И вообще структура примерно такая
.little_block > a > img и .big_block > a > img
для little_block высота к примеру 300 а для big_block тогда 600 у ссылки position: relative: width: 100%; height: 100%; display: block; overflow: hidden;
у img width: 100%; height: auto; - как то так
@Libris Вроде пока с картинками разобрался, но есть в другом вопрос.
У меня минимальная ширина страницы 1024px, в хроме при эмуллировании девайса с шириной в 1024px горизонтального скролла нет, а если просто уменьшить окно браузера до 1024px то скролл есть, думаю проблемы в шапке.
Есть идеи по поводу этого?
@Libris Это хороший план, но мне надо поставить свойство так, чтобы начинался горизонтальный скролл именно с 1024px, а сейчас он начинает раньше и никак не могу разобраться в чем дело(
