Блог

Главная - Вопросы по программированию - как сделать div, завернутый в гибкий контейнер, таким образом, чтобы он позволял другим элементам находиться в одной строке с помощью html css?

как сделать div, завернутый в гибкий контейнер, таким образом, чтобы он позволял другим элементам находиться в одной строке с помощью html css?

#html #css

Вопрос:

Привет, ниже приведен html-код,

 .wrapper {
    min-width: 0%;
    max-width: 100%;
    line-height: 21px;
    position:relative;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    max-height: 50px;
    text-align:center;
}

.iconwrapper {
    min-width:0;
} 
 <div class="wrapper">
    <div class="iconwrapper">
        <svg/>
    </div>
    <span>sometext</span>
<div>

теперь по какой-то причине div с классом iconwrapper занимает полное пространство в div, а span появляется в следующей строке или ниже в div-оболочке.

как я могу это исправить. не мог бы кто-нибудь помочь мне с этим. Спасибо.

Комментарии:

1. дисплей:flex отсутствует, чтобы сделать оболочку контейнером flex…

Ответ №1:

попробуйте добавить display: flex; свойство в .wrapper .

 .wrapper {
  ...
  
  display: flex;
}

Ответ №2:

Проверьте фрагмент. Как это вы можете предоставить.

 .wrapper {
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    max-height: 50px;
    text-align:center;
    display: flex;
    border: 1px solid #ddd;
}

.iconwrapper {
    min-width:0;
    flex: 1;
    border: 1px solid #ccc;
} 
 <div class="wrapper">
    <div class="iconwrapper">
        <svg/>
    </div>
    <span>sometext</span>
<div>

Комментарии:

1. dispaly:только flex для обертки сделал это благодаря 🙂

Метки: , , ,