@rennameduser_3432

Резиновый блок div?

Здравствуйте, мне нужно чтобы блок оставлял текущие границы при этом если текст выходит за этот блок чтобы родитель расширялся.
608eaeddaa1d1264691415.png

Код:

<div class="box-interactions">
            <span id="name">Гвозди</span>
            <span id="weight">3.62 кг.</span>
            <div class="box"><span>выбросить</span></div>
</div>


.box-interactions {
    display: inline-block;
    background: black;
    height: auto;
    margin-left: 700px;
    margin-top: 500px;
    position: relative;
}
.box-interactions span#name {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 600;
    position: relative;
    left: 10%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin-top: 50%;
}
.box-interactions span#weight {
    font-size: 9.1px;
    color: silver;
    position: absolute;
    top: 28%;
    left: 10%;
    text-transform: uppercase;
}
.box-interactions span#name {
    color: white;
}
.box-interactions .box span  {
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 400;
    margin-left: 7px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.box-interactions .box {
    background: rgb(58, 56, 56);
    width: 90px;
    height: 20px;
    color: white;
    position: relative;
    left: 10%;
    margin-right: 23.5px;
    margin-top: 20px;
    margin-bottom: 8px;
}


Если сейчас написать вместо гвозди что-то длинее - вылезет за блок и перейдет нужные отступы так же блок "выбросить", не увеличится до отступов.
Я без понятия как это правильно сделать
  • Вопрос задан
  • 52 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы