Как мне сохранить все элементы моего класса в контейнере панелиCSS

Разбираемся в CSS
Ответить
Anonymous
 Как мне сохранить все элементы моего класса в контейнере панели

Сообщение Anonymous »

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

Код: Выделить всё

html{
box-sizing: border-box;
}
body {
background-color: blue;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

.panel {
display: flex;
background-color: whitesmoke;
flex-direction: column;
text-align: center;
max-width: 960px;
width: 100%;
text-transform: uppercase;
border-radius: 25px;
padding: 15px;

}

.pricing-img {
margin-bottom: 25px;
}

.pricing-header {
color: gray;
text-transform: uppercase;
}

.pricing-features {
border-top: 1px solid gray;
letter-spacing: 1px;
color: blue;
font-weight: 600;
font-size: 12px;
}

.pricing-features-item {
margin: 25px 0;
border-bottom: 1px solid gray;
}

.pricing-price {
display: block;
color: blue;
font-weight: 600;
font-size: 25px;
margin: 25px 0;
}

.pricing-button {
border-radius: 20px;
border: 1px solid blue;
color: blue;
padding: 24px 50px;
margin: 25px 0;
}

.pricing-button.is-featured {
background-color: blue;
color: white;
}

.pricing-button.is-featured:hover {
background-color: aqua;
color: white;
}

@media (min-width:900px) {
.panel {
display: flex;
flex-direction: row;
}.pricing-plan {
border-right: 1px solid gray;
padding: 25px 50px;
}

.pricing-plan:last-child {
border-right:  none;
}
}

Код: Выделить всё






Price Tiers
[*]







[img]icons/icon1.png[/img]
Personal

[list]
Custom domains
[*]Sleeps after 30 mins of inactivity
[/list]

Free

[url=#/]Sign up[/url]

[img]icons/icon2.png[/img]
Small team

[list]
[*]Never sleeps
[*]Multiple workers for more powerful apps
[/list]

$150

[url=#/]Free trial[/url]

[img]icons/icon3.png[/img]
Enterprise

[list]
[*]Dedicated
[*]Simple horizontal scalability
[/list]
$400

[url=#/]Free trial[/url]







Я пытался превратить контейнер панели во флексбокс в надежде, что все будет просто поместился прямо внутри него, но ничего не получалось, изображения и элементы продолжали выходить за пределы контейнера панели в тело

Подробнее здесь: https://stackoverflow.com/questions/785 ... -container
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»