Незаурядное размещение div'a

@Seft · Регистрация: 14.11.2015

Author24 — интернет-сервис помощи студентам

Здравствуйте. У меня проблема, не знаю как решить поставленную задачу: Есть шаблон, резиновый, верстаю по стандарту, делаю основной див, заливаю его например белым цветом, в нем создаю другой див, у которого макс ширина 1168px и который центрируется и в нём уже контент и дошёл до верстки отзывов, а там такая структура, контент также должен располагаться по центру (там иконка и сам коммент), а вот фон блока должен строится так, изначально идет большой блок серого цвета, соответственно растягивающийся на всю ширину, а в нём идет уже блок с данным отзывом, но фон данного блока начинается с самого начала экрана (его цвет белый), а заканчиваться этот белый цвет должен там где кончается блок, который центрирует контент. После него такой же блок, только он уже должен начинаться с конца монитора. Прошу помощи, может кто-то знает как решить проблему. Уже сайтов 500 просмотрел и не увидел таких блоков. Скрин приложил

@Shakalaka · 14.11.2015, 13:56

Seft, ох и способ у вас мысли излагать...

HTML5

<div class="container">
    <div class="review ">
        <div class="review-inner ">
            <img src="https://yt3.ggpht.com/-YJ8xwJBnr2U/AAAAAAAAAAI/AAAAAAAAAAA/V-oWRHN1lbc/s100-c-k-no/photo.jpg">
            <p>text text text text text text text text text text text text text text text text text text text text text text text text </p>    
        </div>
    </div>
    <div class="review ">
        <div class="review-inner ">
            <img src="https://yt3.ggpht.com/-YJ8xwJBnr2U/AAAAAAAAAAI/AAAAAAAAAAA/V-oWRHN1lbc/s100-c-k-no/photo.jpg">
            <p>text text text text text text text text text text text text text text text text text text text text text text text text </p>    
        </div>
    </div>
    <div class="review ">
        <div class="review-inner ">
            <img src="https://yt3.ggpht.com/-YJ8xwJBnr2U/AAAAAAAAAAI/AAAAAAAAAAA/V-oWRHN1lbc/s100-c-k-no/photo.jpg">
            <p>text text text text text text text text text text text text text text text text text text text text text text text text </p>    
        </div>
    </div>
</div>

CSS

html, body, .container{
    width:100%;
    margin:0;
}
.review{
    width:80%;
    background:#ccc;
    margin-bottom:10px;
}
.review:nth-child(odd){
    float:left;
}
.review:nth-child(even){
    float:right;
}
.review-inner{
    width:70%;
}
.review:nth-child(odd) .review-inner{
    float:right;
}
.review:nth-child(even) .review-inner{
    float:left;
}
.review:nth-child(odd) .review-inner img{
    float:left;
}
.review:nth-child(even) .review-inner img{
    float:right;
}

пример http://jsfiddle.net/shakalaka/ky0L1a9o/

@Seft · 14.11.2015, 14:23 **[ТС]**

Вы мне скинули код, который не подходит мне. Так я уже делал, но проблема тут в другом, т.к. блоки имеют относительный размер (80%), то при размере экрана 2000px блок будет заканчиваться раньше чем центрированный блок, а при маленьком экране не доходит до конца центрированного блока. Скрины прикрепил. А нужно то, чтобы вот этот блок белый первый, который идет от начала экрана, чтобы у него растягивалась только боковая часть, а центр стоял на месте, как и блоки выше

@Shakalaka · 14.11.2015, 14:27

Сообщение от Seft

А нужно то, чтобы вот этот блок белый первый, который идет от начала экрана, чтобы у него растягивалась только боковая часть, а центр стоял на месте, как и блоки выше

Видимо я недостаточно просветленный чтобы понять тот бред который вы пишите

@smile7k · 14.11.2015, 14:33

Не по теме:

Shakalaka, кстати спасибо за мысль, прочёл про псевдоклассы и псевдоэлементы! Полезная инфа, и спасибо за кота в виде комментариев :D

@Seft · 14.11.2015, 14:54 **[ТС]**

Видимо так и есть, Shakalaka, я прикрепил скрин для более детального запроса, там любой поймет. Что в красную обводку заключено должно быть всегда по центру, не зависимо от размера, а вот там где желтые стрелочки эти блоки должны как раз и тянуться в зависимости от экрана, вот что мне нужно

@Shakalaka · 14.11.2015, 15:23

Кликните здесь для просмотра всего текста

HTML5

<div class="container">
    <div class="review">
        <div class="clearfix">
            <img src="https://yt3.ggpht.com/-YJ8xwJBnr2U/AAAAAAAAAAI/AAAAAAAAAAA/V-oWRHN1lbc/s100-c-k-no/photo.jpg" alt="">какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда
        </div>  
    </div>
    <div class="review">
        <div class="clearfix">
            <img src="https://yt3.ggpht.com/-YJ8xwJBnr2U/AAAAAAAAAAI/AAAAAAAAAAA/V-oWRHN1lbc/s100-c-k-no/photo.jpg" alt="">какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда
        </div>  
    </div>
    <div class="review">
        <div class="clearfix">
            <img src="https://yt3.ggpht.com/-YJ8xwJBnr2U/AAAAAAAAAAI/AAAAAAAAAAA/V-oWRHN1lbc/s100-c-k-no/photo.jpg" alt="">какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда
        </div>  
    </div>
    <div class="review">
        <div class="clearfix">
            <img src="https://yt3.ggpht.com/-YJ8xwJBnr2U/AAAAAAAAAAI/AAAAAAAAAAA/V-oWRHN1lbc/s100-c-k-no/photo.jpg" alt="">какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда
        </div>  
    </div>
    <div class="review">
        <div class="clearfix">
            <img src="https://yt3.ggpht.com/-YJ8xwJBnr2U/AAAAAAAAAAI/AAAAAAAAAAA/V-oWRHN1lbc/s100-c-k-no/photo.jpg" alt="">какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда какая-то ерунда
        </div>  
    </div>    
</div>

CSS

html, body{
    margin:0;
    width:100%;
    background:#ccc;
    overflow-x:hidden;
}
.clearfix{
    clear:both;
}
.clearfix:before, .clearfix:after{
    content:" ";
    display:table;
    clear:both;
}
.container{
    width:70%;
    margin:auto;
}
.review{
    background:#fff;
    position:relative;
    margin-bottom:20px;
}
.review:after{
    content:" ";
    display:block;
    position:absolute;
    top:0;
    bottom:0;
    background:#fff;
    width:2000px;
}
.review:nth-child(odd):after{
    right:100%;
    left:auto;
}
.review:nth-child(odd) img{
    float:left;
}
.review:nth-child(even):after{
    left:100%;
    right:auto;
}
.review:nth-child(even) img{
    float:right;
}

http://jsfiddle.net/shakalaka/4qjr2fzu/

@Seft · 14.11.2015, 18:55 **[ТС]**

Ох, да, спасибо большое, это то что мне и нужно было, Вы мне очень помогли, отлично!

Добавлено через 2 часа 17 минут
Ещё вопросик, а как можно сделать, чтобы там текст вертикально выравнивался по центру?

Добавлено через 2 минуты
Shakalaka, Ещё вопросик, а как можно сделать, чтобы там текст вертикально выравнивался по центру?

@Shakalaka · 14.11.2015, 19:00

HTML5

<div class="review">
        <div class="clearfix">
            <img src="https://yt3.ggpht.com/-YJ8xwJBnr2U/AAAAAAAAAAI/AAAAAAAAAAA/V-oWRHN1lbc/s100-c-k-no/photo.jpg" alt=""><span>какая-то ерунда</span>
        </div>  
</div>

CSS

.review div{
    display:table-row;
}
.review span{
    vertical-align:middle;
    display:table-cell;
}

@Seft · 14.11.2015, 21:03 **[ТС]**

Shakalaka, Если это прописываю, то все картинки флоутятся по левому краю, а не чередуются

Добавлено через 17 минут
Shakalaka, помогите, пожалуйста

Добавлено через 12 минут
Shakalaka, просто т.к. теперь это стали ячейки таблицы, то не действуют флоаты и пришлось просто тег img во втором блоке поставить после span'а с текстом, но тогда и флоаты получается не нужны (вроде как), а можно как-нибудь сделать, чтобы структура html осталась та же и флоаты заработали?

Добавлено через 39 минут
Shakalaka, И ещё теперь не могу бордеры задать у блоков, как на скрине

@Shakalaka · 14.11.2015, 22:56

Сообщение от Seft

а можно как-нибудь сделать, чтобы структура html осталась та же и флоаты заработали?

Вам с шашечками или ехать? Непонятно что у вас за структура, непонятно какая будет верстка. Методов центрировать что-то вертикально много и все они костыльные за исключением vertical-align в ячейках таблицы. Можете поискать в гугле такого добра там навалом.

Кликните здесь для просмотра всего текста

HTML5

<div class="container">
        <div class="review">
            <div class="clearfix">
                <div class="content">
                    <img src="https://yt3.ggpht.com/-YJ8xwJBnr2U/AAAAAAAAAAI/AAAAAAAAAAA/V-oWRHN1lbc/s100-c-k-no/photo.jpg" alt="">
                        <div  class="centered">какая-то ерунда </div>
                </div>
            </div>  
        </div>
        <div class="review" >
            <div class="clearfix ">
                <div class="content" >
                    <img src="https://yt3.ggpht.com/-YJ8xwJBnr2U/AAAAAAAAAAI/AAAAAAAAAAA/V-oWRHN1lbc/s100-c-k-no/photo.jpg" alt="">
                        <div  class="centered">
                            какая-то ерунда<br>
                            еще ерунда 
                        </div>
                </div>
            </div>  
        </div>
</div>

CSS

html, body{
    margin:0;
    width:100%;
    background:#ccc;
    overflow-x:hidden;
}
.clearfix{
    clear:both;
}
.clearfix:before, .clearfix:after{
    content:" ";
    display:table;
    clear:both;
}
.container{
    width:70%;
    margin:auto;
}
.review{
    background:#fff;
    position:relative;
    margin-bottom:20px;
    text-align:left;
}
.review:after{
    content:" ";
    display:block;
    position:absolute;
    top:0;
    bottom:0;
    background:#fff;
    width:2000px;
}
.review:nth-child(odd):after{
    right:100%;
    left:auto;
}
.review:nth-child(odd) img{
    float:left;
    vertical-align:middle;
}
.review:nth-child(even):after{
    left:100%;
    right:auto;
}
.review:nth-child(even) img{
    float:right;
    vertical-align:middle;
    
}
.content{
    height:100px;
}
.content:before {
    content: '';
    display: inline-block;
    height: 100%; 
    vertical-align: middle;  
}
.centered {
    display: inline-block;
    vertical-align: middle;
 }

http://jsfiddle.net/shakalaka/4qjr2fzu/1/ вот еще один способ

Новые блоги и статьи
Книги и учебные ресурсы по C# InfoMaster 08.01.2025 Базовые учебники и руководства Одной из лучших книг для начинающих является "C# 10 и . NET 6 для начинающих" Эндрю Троелсена и Филиппа Джепикса . Книга последовательно раскрывает основные концепции. . .	Что такое NullReferenceException и как исправить? InfoMaster 08.01.2025 NullReferenceException - одно из самых распространенных исключений, с которым сталкиваются разработчики на C#. Это исключение возникает при попытке обратиться к членам объекта (методам, свойствам или. . .	Что такое Null Pointer Exception (NPE) и как это исправить? InfoMaster 08.01.2025 Null Pointer Exception (NPE) - это одно из самых распространенных исключений в Java, которое возникает при попытке использовать ссылку на объект, значение которой равно null. Это исключение относится. . .	Русский язык в консоли C++ InfoMaster 08.01.2025 При разработке программ на C++ одной из частых проблем, с которой сталкиваются русскоязычные программисты, является корректное отображение кириллицы в консольных приложениях. Эта проблема особенно. . .	Telegram бот на C# InfoMaster 08.01.2025 Разработка ботов для Telegram стала неотъемлемой частью современной экосистемы мессенджеров. C# предоставляет мощный и удобный инструментарий для создания разнообразных ботов, от простых. . .	Использование GraphQL в Go (Golang) InfoMaster 08.01.2025 Go (Golang) является одним из наиболее популярных языков программирования, используемых для создания высокопроизводительных серверных приложений. Его архитектурные особенности и встроенные. . .
Что лучше использовать при создании класса в Java: сеттеры или конструктор? Alexander-7 08.01.2025 Вопрос подробнее: На вопрос: «Когда одновременно создаются конструктор и сеттеры в классе – это нормально?» куратор уточнил: «Ваш класс может вообще не иметь сеттеров, а только конструктор и геттеры. . .	Как работать с GraphQL на TypeScript InfoMaster 08.01.2025 Введение в GraphQL и TypeScript В современной разработке веб-приложений GraphQL стал мощным инструментом для создания гибких и эффективных API. В сочетании с TypeScript, эта технология. . .	Счётчик на базе сумматоров + регистров и генератора сигналов согласования. Hrethgir 07.01.2025 Создан с целью проверки скорости асинхронной логики: ранее описанного сумматора и предополагаемых fast регистров. Регистры созданы на базе ранее описанного, предполагаемого fast триггера. То-есть. . .	Как перейти с Options API на Composition API в Vue.js BasicMan 06.01.2025 Почему переход на Composition API актуален В мире современной веб-разработки фреймворк Vue. js продолжает эволюционировать, предлагая разработчикам все более совершенные инструменты для создания. . .	Архитектура современных процессоров inter-admin 06.01.2025 Процессор (центральный процессор, ЦП) является основным вычислительным устройством компьютера, которое выполняет обработку данных и управляет работой всех остальных компонентов системы. Архитектура. . .	История создания реляционной модели баз данных, правила Кодда Programming 06.01.2025 Предпосылки создания реляционной модели В конце 1960-х годов компьютерная индустрия столкнулась с серьезными проблемами в области управления данными. Существовавшие на тот момент модели данных -. . .

@Seft 4 / 4 / 4 Регистрация: 14.11.2015 Сообщений: 24
		1
	Незаурядное размещение div'a 14.11.2015, 13:32. Показов 1053. Ответов 10 Метки нет (Все метки) Здравствуйте. У меня проблема, не знаю как решить поставленную задачу: Есть шаблон, резиновый, верстаю по стандарту, делаю основной див, заливаю его например белым цветом, в нем создаю другой див, у которого макс ширина 1168px и который центрируется и в нём уже контент и дошёл до верстки отзывов, а там такая структура, контент также должен располагаться по центру (там иконка и сам коммент), а вот фон блока должен строится так, изначально идет большой блок серого цвета, соответственно растягивающийся на всю ширину, а в нём идет уже блок с данным отзывом, но фон данного блока начинается с самого начала экрана (его цвет белый), а заканчиваться этот белый цвет должен там где кончается блок, который центрирует контент. После него такой же блок, только он уже должен начинаться с конца монитора. Прошу помощи, может кто-то знает как решить проблему. Уже сайтов 500 просмотрел и не увидел таких блоков. Скрин приложил Миниатюры 0

@Seft 4 / 4 / 4 Регистрация: 14.11.2015 Сообщений: 24
	14.11.2015, 14:23 [ТС]	3
	Вы мне скинули код, который не подходит мне. Так я уже делал, но проблема тут в другом, т.к. блоки имеют относительный размер (80%), то при размере экрана 2000px блок будет заканчиваться раньше чем центрированный блок, а при маленьком экране не доходит до конца центрированного блока. Скрины прикрепил. А нужно то, чтобы вот этот блок белый первый, который идет от начала экрана, чтобы у него растягивалась только боковая часть, а центр стоял на месте, как и блоки выше Миниатюры 0

@Shakalaka 653 / 556 / 322 Регистрация: 27.01.2015 Сообщений: 1,374
	14.11.2015, 14:27	4
	Сообщение от Seft А нужно то, чтобы вот этот блок белый первый, который идет от начала экрана, чтобы у него растягивалась только боковая часть, а центр стоял на месте, как и блоки выше Видимо я недостаточно просветленный чтобы понять тот бред который вы пишите 0

@smile7k
	14.11.2015, 14:33 #5
	Не по теме: Shakalaka, кстати спасибо за мысль, прочёл про псевдоклассы и псевдоэлементы! Полезная инфа, и спасибо за кота в виде комментариев :D 0

@Seft 4 / 4 / 4 Регистрация: 14.11.2015 Сообщений: 24
	14.11.2015, 14:54 [ТС]	6
	Видимо так и есть, Shakalaka, я прикрепил скрин для более детального запроса, там любой поймет. Что в красную обводку заключено должно быть всегда по центру, не зависимо от размера, а вот там где желтые стрелочки эти блоки должны как раз и тянуться в зависимости от экрана, вот что мне нужно Миниатюры 0

@Seft 4 / 4 / 4 Регистрация: 14.11.2015 Сообщений: 24
	14.11.2015, 18:55 [ТС]	8
	Ох, да, спасибо большое, это то что мне и нужно было, Вы мне очень помогли, отлично! Добавлено через 2 часа 17 минут Ещё вопросик, а как можно сделать, чтобы там текст вертикально выравнивался по центру? Добавлено через 2 минуты Shakalaka, Ещё вопросик, а как можно сделать, чтобы там текст вертикально выравнивался по центру? 0

@Seft 4 / 4 / 4 Регистрация: 14.11.2015 Сообщений: 24
	14.11.2015, 21:03 [ТС]	10
	Shakalaka, Если это прописываю, то все картинки флоутятся по левому краю, а не чередуются Добавлено через 17 минут Shakalaka, помогите, пожалуйста Добавлено через 12 минут Shakalaka, просто т.к. теперь это стали ячейки таблицы, то не действуют флоаты и пришлось просто тег img во втором блоке поставить после span'а с текстом, но тогда и флоаты получается не нужны (вроде как), а можно как-нибудь сделать, чтобы структура html осталась та же и флоаты заработали? Добавлено через 39 минут Shakalaka, И ещё теперь не могу бордеры задать у блоков, как на скрине 0

Незаурядное размещение div'a

Решение