Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/6: Рейтинг темы: голосов - 6, средняя оценка - 4.67
0 / 0 / 1
Регистрация: 03.01.2013
Сообщений: 19
1

Элемент float вне родительского или может с inline-block?

11.07.2017, 21:32. Показов 1249. Ответов 2
Метки нет (Все метки)

Собственно, то как должно быть. У меня div с телефоном вложен в контейнер div красной области (ниже хедера). По условию, нужно позиционировать используя float: right/left или display: inline-block; но не position: absolute;
Нужно реализовать следующее. Когда текста (над зеленой кнопкой) мало, то граница между красным и белым разделом страницы должна быть как в макете. Но при добавлении текста, много текста, красный раздел должен вытягиваться вниз, а телефон оставаться привязанный отступами к верхней и левой границе красного раздела. Зеленую кнопку у меня тоже не получается привязать к нижней и правой границе красного "родителя".
0
Миниатюры
Элемент float вне родительского или может с inline-block?  
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
11.07.2017, 21:32
Ответы с готовыми решениями:

float and inline-block
Здравствуйте, у меня сложилась такая проблема, надо срочно решить. У меня на странице должны идти...

Заменить float на inline-block
<div class="container"> <div class="left tex"> Lorem ipsum dolor sit amet, consectetur...

Float, display: inline-block почему?
Здравствуйте! Подскажите, пожалуйста, почему могут не работать float или display: inline-block?...

Растяжение inline-block-элементом родительского элемента по вертикали на величину, превышающую line-height
Приветствую читателей данной темы! При изучении поведения элементов веб-страницы возник вопрос. В...

__________________
2
0 / 0 / 1
Регистрация: 03.01.2013
Сообщений: 19
11.07.2017, 21:42  [ТС] 2
Лучший ответ Сообщение было отмечено Shell23 как решение

Решение

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
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
<body>
    <!--Header-->
    <header>
        <div class="container">
            <!--Logo-->
            <div class="logo">
                <a href="#"><img src="images/logo.png" alt=""></a>
            </div>
            <!--Navigation panel-->
            <div class="navigation">
                <a href="#">about me</a>
                <a href="#">my blog</a>
                <a href="#">contact me</a>
            </div>
        </div>
    </header>
 
    <!--Main container-->
    <div class="main_container">
 
        <div class="phone">
            <img src="images/phone.png" alt="cellphone">
        </div>
 
        <div class="right-wrap">
           
                <div class="main-text">
                    <div class="caption">We design and build beautiful web <&> mobile apps</div>
                    
                    <p>You can design and create, and build the most wonderful place in the world. But it takes people to make the dream a reality. - Walt Disney. <br> 
                    </p>
                </div>
                
            <div class="green-button">
                <button>know more</button>
            </div>
            
        </div>
          <!--put clear:both here-->
          <div style="clear:both;"></div>
          
    </div>
 
    <!--White block containing forms-->
    <div class="whiteblock">
        <div class="contact-form">
 
            <form action="#">
                
            </form>
        </div>
    </div>
 
    <!--Footer-->
    <footer> </footer>
 
</body>
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
.main_container {
    margin: 0 auto;
    background-color: #ef5350;
    min-height: 584px;
}
 
.phone img {
    float: left;
    margin-left: 14%;
    margin-top: 5%;
}
 
.right-wrap {
    float: right;
}
 
.main-text {
    width: 510px;
    margin-bottom: 58px;
    margin-right: 156px;
    margin-top: 190px;
}
 
.caption {
    font-size: 30px;
    font-weight: 100;
    font-family: Montserrat, Arial;
    color: white;
    text-transform: uppercase;
}
 
p {
    font-size: 20px;
    font-family: 'Montserrat Light', Arial;
    color: black;
    margin-top: 36px;
}
 
button {
    float: right;
    width: 166px;
    height: 54px;
    margin-right: 160px;
    margin-bottom: 130px;
    font-family: Montserrat, Arial;
    text-transform: uppercase;
    font-size: 18px;
    background: #04e4a2;
    color: white;
    border-radius: 5px;
}
0
0 / 0 / 1
Регистрация: 03.01.2013
Сообщений: 19
11.07.2017, 21:53  [ТС] 3
Вот что получается. Кнопка не привязана к низу красного контейнера. Ну да ладно. В 40-ой строке поставил clear: both
Именно он вытягивает красную область при добавлении текста. Если clear: both убрать, то граница нижняя встает куда надо, но тогда текст накладывается.
Элемент float вне родительского или может с inline-block?
Элемент float вне родительского или может с inline-block?


Результат без clear: both
Элемент float вне родительского или может с inline-block?
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
11.07.2017, 21:53

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Почему может не работать vertical-align: bottom; при display: inline-block;?
Вот смотрите, у меня есть div с id=wrapper внутри которого содержится всё, что должно быть на...

inline-block или нет?
Здравствуйте! Наткнулся на один интересный сайт http://learni.st (дизайн приглянулся), так вот...

На что ещё inline-block элемент забирает ширину?
Если расположить в ряд 4 inline-block элемента шириной 25% - последний всё-равно переносится на...

Inline-block галерея или как убрать margin
Добрый вечер! Необходима фотогалерея. На просторах интернета нашел 2 популярных способа - float...


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

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

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