Проблема с созданием стиля стиля.

46
5

.circle {
max-width: 150px;
width: 100%;
max-height: 150px;
height: 100%;
display: block;
background: #ff4040;
border-radius:50%;
}

Привет, ребята, я пытаюсь создать круг с bg-цветом. Но на основе моего стиля, который я приложил выше, работает неправильно. Высота не поднялась. Не могли бы вы рассказать мне, почему? Спасибо :)

спросил(а) 2018-11-02T09:53:00+03:00 1 год, 1 месяц назад
2
Решение
46

Всегда рекомендуется указывать высоту для родителя/дедушки и бабушки, прежде чем использовать height:100% для дочернего элемента

Попробуй это

.circle {
max-width: 150px;
width: 100%;
max-height: 150px;
height: 100%;
display: block;
background: #ff4040;
border-radius:50%;
}

body{
height:100vh;
position:relative;
}

<div class="circle"></div>

Если вы по-прежнему не хотите упоминать высоту элемента body (parent), вы можете определить их как это

Поскольку по умолчанию элементы div являются block элементами

Элементы блока всегда имеют ширину 100% но не определенную высоту

поэтому определите максимальную ширину фактического размера и установите его width на 100% чтобы она не уклонилась от заданной ширины.

Но когда дело доходит до высоты divs по умолчанию не имеют высоты, поэтому здесь задайте height или min-height в соответствии с требуемым значением и добавьте max-height:100% (необязательно)

Элемент уровня блока всегда начинается с новой строки и занимает всю доступную ширину (растягивается влево и вправо, насколько это возможно)

Ссылка: https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

    .circle {
max-width: 150px;
width:100%;
max-height: 100%;
min-height:150px;
display: block;
background: #ff4040;
border-radius:100%;
}
    <div class="circle"></div>

ответил(а) 2018-11-02T10:14:00+03:00 1 год, 1 месяц назад
Еще 1 ответ
32

Вы должны объявить высоту родительского элемента, чтобы иметь возможность использовать% -size для детей.

как например:

.parent{
height: 666px; //or any %-value if the grandmother height is defined trailing back to the html-element
}

Проверьте эту скрипку:

https://jsfiddle.net/n1o8057L/1/

ответил(а) 2018-11-02T10:00:00+03:00 1 год, 1 месяц назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема