Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.60/5: Рейтинг темы: голосов - 5, средняя оценка - 4.60
4 / 4 / 4
Регистрация: 14.11.2015
Сообщений: 24
1

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

14.11.2015, 13:32. Показов 1045. Ответов 10
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Здравствуйте. У меня проблема, не знаю как решить поставленную задачу: Есть шаблон, резиновый, верстаю по стандарту, делаю основной див, заливаю его например белым цветом, в нем создаю другой див, у которого макс ширина 1168px и который центрируется и в нём уже контент и дошёл до верстки отзывов, а там такая структура, контент также должен располагаться по центру (там иконка и сам коммент), а вот фон блока должен строится так, изначально идет большой блок серого цвета, соответственно растягивающийся на всю ширину, а в нём идет уже блок с данным отзывом, но фон данного блока начинается с самого начала экрана (его цвет белый), а заканчиваться этот белый цвет должен там где кончается блок, который центрирует контент. После него такой же блок, только он уже должен начинаться с конца монитора. Прошу помощи, может кто-то знает как решить проблему. Уже сайтов 500 просмотрел и не увидел таких блоков. Скрин приложил
Миниатюры
Незаурядное размещение div'a  
0
Лучшие ответы (1)
Сообщение: #8339796
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 14.11.2015, 13:32
Ответы с готовыми решениями:

Наложение Diva поверх другого diva
Помогите уже час думаю как сделать не получается.

Ширина diva
Здравствуйте. Не задается длинна дива указанного на рисунке, как была 66 пикселей так и осталась, а...

Отображение diva
Друзья, помогите сделал какую-то ерунду. Как, при нажатии на пункт меню, скрывались старые картинки...

Есть два Diva
Добрый день. Извините за такой вопрос, но все таки может кто подскажет. У меня есть 2 diva , Один к...

10
Эксперт HTML/CSS
653 / 556 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
14.11.2015, 13:56 2
Seft, ох и способ у вас мысли излагать...
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

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/
1
4 / 4 / 4
Регистрация: 14.11.2015
Сообщений: 24
14.11.2015, 14:23  [ТС] 3
Вы мне скинули код, который не подходит мне. Так я уже делал, но проблема тут в другом, т.к. блоки имеют относительный размер (80%), то при размере экрана 2000px блок будет заканчиваться раньше чем центрированный блок, а при маленьком экране не доходит до конца центрированного блока. Скрины прикрепил. А нужно то, чтобы вот этот блок белый первый, который идет от начала экрана, чтобы у него растягивалась только боковая часть, а центр стоял на месте, как и блоки выше
Миниатюры
Незаурядное размещение div'a   Незаурядное размещение div'a  
0
Эксперт HTML/CSS
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
4 / 4 / 4
Регистрация: 14.11.2015
Сообщений: 24
14.11.2015, 14:54  [ТС] 6
Видимо так и есть, Shakalaka, я прикрепил скрин для более детального запроса, там любой поймет. Что в красную обводку заключено должно быть всегда по центру, не зависимо от размера, а вот там где желтые стрелочки эти блоки должны как раз и тянуться в зависимости от экрана, вот что мне нужно
Миниатюры
Незаурядное размещение div'a  
0
Эксперт HTML/CSS
653 / 556 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
14.11.2015, 15:23 7
Лучший ответ Сообщение было отмечено Seft как решение

Решение

Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

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/
1
4 / 4 / 4
Регистрация: 14.11.2015
Сообщений: 24
14.11.2015, 18:55  [ТС] 8
Ох, да, спасибо большое, это то что мне и нужно было, Вы мне очень помогли, отлично!

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

Добавлено через 2 минуты
Shakalaka, Ещё вопросик, а как можно сделать, чтобы там текст вертикально выравнивался по центру?
0
Эксперт HTML/CSS
653 / 556 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
14.11.2015, 19:00 9
HTML5
1
2
3
4
5

<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
1
2
3
4
5
6
7

.review div{
    display:table-row;
}
.review span{
    vertical-align:middle;
    display:table-cell;
}
1
4 / 4 / 4
Регистрация: 14.11.2015
Сообщений: 24
14.11.2015, 21:03  [ТС] 10
Shakalaka, Если это прописываю, то все картинки флоутятся по левому краю, а не чередуются

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

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

Добавлено через 39 минут
Shakalaka, И ещё теперь не могу бордеры задать у блоков, как на скрине
0
Эксперт HTML/CSS
653 / 556 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
14.11.2015, 22:56 11
Цитата Сообщение от Seft Посмотреть сообщение
а можно как-нибудь сделать, чтобы структура html осталась та же и флоаты заработали?
Вам с шашечками или ехать? Непонятно что у вас за структура, непонятно какая будет верстка. Методов центрировать что-то вертикально много и все они костыльные за исключением vertical-align в ячейках таблицы. Можете поискать в гугле такого добра там навалом.
Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

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/ вот еще один способ
1
14.11.2015, 22:56
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 14.11.2015, 22:56
Помогаю со студенческими работами здесь

div вылазиет из diva
У меня в div(контент) находятся еще 2 diva слева и справа , при добавлении текста во внутренний div...

Изменить расположение diva
&lt;div id=&quot;main&quot;&gt; &lt;div id=&quot;navigation&quot;&gt; &lt;ul class=&quot;menuUL&quot;&gt; &lt;!-- The class...

Помоги с выравниванием diva
я уже не знаю что делать ...уже испробывала все что можно(((( Проблема в том что есть два блока...

Изменение backgroundcolor DIVa
Случайному DIVу, выбранному с помощью math.random по нажатию button присвоен синий цвет. Как в этом...


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

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru