выровняйте текст и изображения внутри дивов бок о бок

ProgramBox

выровняйте текст и изображения внутри дивов бок о бок

Post author:admin
Запись опубликована:9 января, 2022
Post category:Вопросы по программированию

#javascript #html #css #bootstrap-4

Вопрос:

Поэтому я сделал это ul со списком li входящих. В каждом li из них есть некоторые div с текстом и изображениями. У меня проблема, из-за которой мой текст и изображения больше не отображаются в строке, и я, похоже, не могу ее исправить.

Просто чтобы показать свою проблему , которую я поставил style="width: 100px;" , потому что я пытаюсь получить что-то подобное, хотя это на:

 /* Weather icon on dashboard */

.element_weather {
    min-height: 30px !important;
    min-width: 30px !important;
}

.container_weather {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.elements_weather {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.white {
    fill: #edf8ff
}

.gray {
    fill: #cecece
}

.yellow {
    fill: #fabb33
}

.blue {
    fill: #83bfff
}

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<ul id="tog_success-123" class="list-group list-group-flush rounded" style="width: 100px;">
   <li id="1" class="list-group-item list-group-item-success">
      <a class="text-dark" href="TestResults?blablabla" target="_blank" >
         <div class="row justify-content-between">
            <div class="col-s-6 text-justify">
               test - 12345
            </div>
            <div class="col-s-6 d-flex ml-auto mr-0">
               <div class="col-s-3 mt-1 ml-1 mr-1">
                  <img src="https://camo.githubusercontent.com/4f70df5863fcc35898abfdc8a60628bb6aabf0fea2225cb9c63d3641c48711ef/68747470733a2f2f61746c61737369616e2e67616c6c65727963646e2e76736173736574732e696f2f657874656e73696f6e732f61746c61737369616e2f61746c6173636f64652f312e342e302f313535383132333132313437352f4d6963726f736f66742e56697375616c53747564696f2e53657276696365732e49636f6e732e44656661756c74" alt="Girl in a jacket" width="14" height="14">
               </div>
               <div class="col-s-3">
                  <div id="svg_dashboard_weather" class="element_weather" title="5/5">
                     <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 44.9 44.9" style="enable-background:new 0 0 44.9 44.9;" xml:space="preserve" height="25px" width="25px">
                        <g id="Sun">
                           <circle id="XMLID_61_" class="yellow" cx="22.4" cy="22.6" r="11"/>
                           <g>
                              <path id="XMLID_60_" class="yellow" d="M22.6,8.1h-0.3c-0.3,0-0.6-0.3-0.6-0.6v-7c0-0.3,0.3-0.6,0.6-0.6l0.3,0c0.3,0,0.6,0.3,0.6,0.6 v7C23.2,7.8,22.9,8.1,22.6,8.1z"/>
                              <path id="XMLID_59_" class="yellow" d="M22.6,36.8h-0.3c-0.3,0-0.6,0.3-0.6,0.6v7c0,0.3,0.3,0.6,0.6,0.6h0.3c0.3,0,0.6-0.3,0.6-0.6v-7 C23.2,37,22.9,36.8,22.6,36.8z"/>
                              <path id="XMLID_58_" class="yellow" d="M8.1,22.3v0.3c0,0.3-0.3,0.6-0.6,0.6h-7c-0.3,0-0.6-0.3-0.6-0.6l0-0.3c0-0.3,0.3-0.6,0.6-0.6h7 C7.8,21.7,8.1,21.9,8.1,22.3z"/>
                              <path id="XMLID_57_" class="yellow" d="M36.8,22.3v0.3c0,0.3,0.3,0.6,0.6,0.6h7c0.3,0,0.6-0.3,0.6-0.6v-0.3c0-0.3-0.3-0.6-0.6-0.6h-7 C37,21.7,36.8,21.9,36.8,22.3z"/>
                              <path id="XMLID_56_" class="yellow" d="M11.4,31.6l0.2,0.3c0.2,0.2,0.2,0.6-0.1,0.8l-5.3,4.5c-0.2,0.2-0.6,0.2-0.8-0.1l-0.2-0.3 c-0.2-0.2-0.2-0.6,0.1-0.8l5.3-4.5C10.9,31.4,11.2,31.4,11.4,31.6z"/>
                              <path id="XMLID_55_" class="yellow" d="M33.2,13l0.2,0.3c0.2,0.2,0.6,0.3,0.8,0.1l5.3-4.5c0.2-0.2,0.3-0.6,0.1-0.8l-0.2-0.3 c-0.2-0.2-0.6-0.3-0.8-0.1l-5.3,4.5C33,12.4,33,12.7,33.2,13z"/>
                              <path id="XMLID_54_" class="yellow" d="M11.4,13.2l0.2-0.3c0.2-0.2,0.2-0.6-0.1-0.8L6.3,7.6C6.1,7.4,5.7,7.5,5.5,7.7L5.3,7.9 C5.1,8.2,5.1,8.5,5.4,8.7l5.3,4.5C10.9,13.5,11.2,13.5,11.4,13.2z"/>
                              <path id="XMLID_53_" class="yellow" d="M33.2,31.9l0.2-0.3c0.2-0.2,0.6-0.3,0.8-0.1l5.3,4.5c0.2,0.2,0.3,0.6,0.1,0.8l-0.2,0.3 c-0.2,0.2-0.6,0.3-0.8,0.1l-5.3-4.5C33,32.5,33,32.1,33.2,31.9z"/>
                              <animate attributeType="CSS"
                                 attributeName="opacity"
                                 attributeType="XML"
                                 dur="0.5s"
                                 keyTimes="0;0.5;1"
                                 repeatCount="indefinite"
                                 values="1;0.6;1"
                                 calcMode="linear"/>
                           </g>
                        </g>
                     </svg>
                  </div>
               </div>
            </div>
         </div>
      </a>
   </li>
</ul>

Редактировать

Когда мой столбец li становится вдвое меньше по ширине, строка значков подскакивает, а этого не должно быть.

1. Я этого не понимаю. Если вы удалите то width:100px , что искусственно сжимает вашу строку (поэтому, естественно, все элементы в нее не помещаются), и установите ее, скажем, на 200 пикселей, вы получите ожидаемый результат. Все элементы находятся в одной строке, как на маленьком скриншоте. Кажется, это работает, чего мне не хватает?

2. То, что я пытаюсь сделать, — это заставить значки всегда находиться в одной строке (первой) с текстом, потому что, когда текст разбивается на две строки, значки также прыгают вместе с ним

3. Ну flex-wrap: wrap , тогда снимите. Это позволяет переполненным элементам переходить на следующую строку.

4. @JeremyThille В своем редактировании я показал проблему, когда div переходит под другой div, который выглядит подключенным для просмотра пользователем.

5. Хорошо выяснил , что это было из row -за того, что это должно быть изменено на col не видел…

Ответ №1:

В настоящее .row время к вам применяется flex-wrap:wrap файл, полученный из bootstrap.css.

Вы можете перезаписать его с помощью flex-wrap: nowrap :

 /* Weather icon on dashboard */

.element_weather {
    min-height: 30px !important;
    min-width: 30px !important;
}

.container_weather {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.elements_weather {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.white {
    fill: #edf8ff
}

.gray {
    fill: #cecece
}

.yellow {
    fill: #fabb33
}

.blue {
    fill: #83bfff
}

.row {
    border : blue dashed 1px;
    flex-wrap : nowrap!important;
}

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<ul id="tog_success-123" class="list-group list-group-flush rounded" style="width: 100px;">
   <li id="1" class="list-group-item list-group-item-success">
      <a class="text-dark" href="TestResults?blablabla" target="_blank" >
         <div class="row justify-content-between">
            <div class="col-s-6 text-justify">
               test - 12345
            </div>
            <div class="col-s-6 d-flex ml-auto mr-0">
               <div class="col-s-3 mt-1 ml-1 mr-1">
                  <img src="https://camo.githubusercontent.com/4f70df5863fcc35898abfdc8a60628bb6aabf0fea2225cb9c63d3641c48711ef/68747470733a2f2f61746c61737369616e2e67616c6c65727963646e2e76736173736574732e696f2f657874656e73696f6e732f61746c61737369616e2f61746c6173636f64652f312e342e302f313535383132333132313437352f4d6963726f736f66742e56697375616c53747564696f2e53657276696365732e49636f6e732e44656661756c74" alt="Girl in a jacket" width="14" height="14">
               </div>
               <div class="col-s-3">
                  <div id="svg_dashboard_weather" class="element_weather" title="5/5">
                     <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 44.9 44.9" style="enable-background:new 0 0 44.9 44.9;" xml:space="preserve" height="25px" width="25px">
                        <g id="Sun">
                           <circle id="XMLID_61_" class="yellow" cx="22.4" cy="22.6" r="11"/>
                           <g>
                              <path id="XMLID_60_" class="yellow" d="M22.6,8.1h-0.3c-0.3,0-0.6-0.3-0.6-0.6v-7c0-0.3,0.3-0.6,0.6-0.6l0.3,0c0.3,0,0.6,0.3,0.6,0.6 v7C23.2,7.8,22.9,8.1,22.6,8.1z"/>
                              <path id="XMLID_59_" class="yellow" d="M22.6,36.8h-0.3c-0.3,0-0.6,0.3-0.6,0.6v7c0,0.3,0.3,0.6,0.6,0.6h0.3c0.3,0,0.6-0.3,0.6-0.6v-7 C23.2,37,22.9,36.8,22.6,36.8z"/>
                              <path id="XMLID_58_" class="yellow" d="M8.1,22.3v0.3c0,0.3-0.3,0.6-0.6,0.6h-7c-0.3,0-0.6-0.3-0.6-0.6l0-0.3c0-0.3,0.3-0.6,0.6-0.6h7 C7.8,21.7,8.1,21.9,8.1,22.3z"/>
                              <path id="XMLID_57_" class="yellow" d="M36.8,22.3v0.3c0,0.3,0.3,0.6,0.6,0.6h7c0.3,0,0.6-0.3,0.6-0.6v-0.3c0-0.3-0.3-0.6-0.6-0.6h-7 C37,21.7,36.8,21.9,36.8,22.3z"/>
                              <path id="XMLID_56_" class="yellow" d="M11.4,31.6l0.2,0.3c0.2,0.2,0.2,0.6-0.1,0.8l-5.3,4.5c-0.2,0.2-0.6,0.2-0.8-0.1l-0.2-0.3 c-0.2-0.2-0.2-0.6,0.1-0.8l5.3-4.5C10.9,31.4,11.2,31.4,11.4,31.6z"/>
                              <path id="XMLID_55_" class="yellow" d="M33.2,13l0.2,0.3c0.2,0.2,0.6,0.3,0.8,0.1l5.3-4.5c0.2-0.2,0.3-0.6,0.1-0.8l-0.2-0.3 c-0.2-0.2-0.6-0.3-0.8-0.1l-5.3,4.5C33,12.4,33,12.7,33.2,13z"/>
                              <path id="XMLID_54_" class="yellow" d="M11.4,13.2l0.2-0.3c0.2-0.2,0.2-0.6-0.1-0.8L6.3,7.6C6.1,7.4,5.7,7.5,5.5,7.7L5.3,7.9 C5.1,8.2,5.1,8.5,5.4,8.7l5.3,4.5C10.9,13.5,11.2,13.5,11.4,13.2z"/>
                              <path id="XMLID_53_" class="yellow" d="M33.2,31.9l0.2-0.3c0.2-0.2,0.6-0.3,0.8-0.1l5.3,4.5c0.2,0.2,0.3,0.6,0.1,0.8l-0.2,0.3 c-0.2,0.2-0.6,0.3-0.8,0.1l-5.3-4.5C33,32.5,33,32.1,33.2,31.9z"/>
                              <animate attributeType="CSS"
                                 attributeName="opacity"
                                 attributeType="XML"
                                 dur="0.5s"
                                 keyTimes="0;0.5;1"
                                 repeatCount="indefinite"
                                 values="1;0.6;1"
                                 calcMode="linear"/>
                           </g>
                        </g>
                     </svg>
                  </div>
               </div>
            </div>
         </div>
      </a>
   </li>
</ul>

Ответ №2:

row изменено на col и d-flex добавлено

 /* Weather icon on dashboard */

.element_weather {
    min-height: 30px !important;
    min-width: 30px !important;
}

.container_weather {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.elements_weather {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.white {
    fill: #edf8ff
}

.gray {
    fill: #cecece
}

.yellow {
    fill: #fabb33
}

.blue {
    fill: #83bfff
}

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<ul id="tog_success-123" class="list-group list-group-flush rounded" style="width: 100px;">
   <li id="1" class="list-group-item list-group-item-success">
      <a class="text-dark" href="TestResults?blablabla" target="_blank" >
         <div class="col d-flex justify-content-between">
            <div class="col-s-6 text-justify">
               test - 12345
            </div>
            <div class="col-s-6 d-flex ml-auto mr-0">
               <div class="col-s-3 mt-1 ml-1 mr-1">
                  <img src="https://camo.githubusercontent.com/4f70df5863fcc35898abfdc8a60628bb6aabf0fea2225cb9c63d3641c48711ef/68747470733a2f2f61746c61737369616e2e67616c6c65727963646e2e76736173736574732e696f2f657874656e73696f6e732f61746c61737369616e2f61746c6173636f64652f312e342e302f313535383132333132313437352f4d6963726f736f66742e56697375616c53747564696f2e53657276696365732e49636f6e732e44656661756c74" alt="Girl in a jacket" width="14" height="14">
               </div>
               <div class="col-s-3">
                  <div id="svg_dashboard_weather" class="element_weather" title="5/5">
                     <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 44.9 44.9" style="enable-background:new 0 0 44.9 44.9;" xml:space="preserve" height="25px" width="25px">
                        <g id="Sun">
                           <circle id="XMLID_61_" class="yellow" cx="22.4" cy="22.6" r="11"/>
                           <g>
                              <path id="XMLID_60_" class="yellow" d="M22.6,8.1h-0.3c-0.3,0-0.6-0.3-0.6-0.6v-7c0-0.3,0.3-0.6,0.6-0.6l0.3,0c0.3,0,0.6,0.3,0.6,0.6 v7C23.2,7.8,22.9,8.1,22.6,8.1z"/>
                              <path id="XMLID_59_" class="yellow" d="M22.6,36.8h-0.3c-0.3,0-0.6,0.3-0.6,0.6v7c0,0.3,0.3,0.6,0.6,0.6h0.3c0.3,0,0.6-0.3,0.6-0.6v-7 C23.2,37,22.9,36.8,22.6,36.8z"/>
                              <path id="XMLID_58_" class="yellow" d="M8.1,22.3v0.3c0,0.3-0.3,0.6-0.6,0.6h-7c-0.3,0-0.6-0.3-0.6-0.6l0-0.3c0-0.3,0.3-0.6,0.6-0.6h7 C7.8,21.7,8.1,21.9,8.1,22.3z"/>
                              <path id="XMLID_57_" class="yellow" d="M36.8,22.3v0.3c0,0.3,0.3,0.6,0.6,0.6h7c0.3,0,0.6-0.3,0.6-0.6v-0.3c0-0.3-0.3-0.6-0.6-0.6h-7 C37,21.7,36.8,21.9,36.8,22.3z"/>
                              <path id="XMLID_56_" class="yellow" d="M11.4,31.6l0.2,0.3c0.2,0.2,0.2,0.6-0.1,0.8l-5.3,4.5c-0.2,0.2-0.6,0.2-0.8-0.1l-0.2-0.3 c-0.2-0.2-0.2-0.6,0.1-0.8l5.3-4.5C10.9,31.4,11.2,31.4,11.4,31.6z"/>
                              <path id="XMLID_55_" class="yellow" d="M33.2,13l0.2,0.3c0.2,0.2,0.6,0.3,0.8,0.1l5.3-4.5c0.2-0.2,0.3-0.6,0.1-0.8l-0.2-0.3 c-0.2-0.2-0.6-0.3-0.8-0.1l-5.3,4.5C33,12.4,33,12.7,33.2,13z"/>
                              <path id="XMLID_54_" class="yellow" d="M11.4,13.2l0.2-0.3c0.2-0.2,0.2-0.6-0.1-0.8L6.3,7.6C6.1,7.4,5.7,7.5,5.5,7.7L5.3,7.9 C5.1,8.2,5.1,8.5,5.4,8.7l5.3,4.5C10.9,13.5,11.2,13.5,11.4,13.2z"/>
                              <path id="XMLID_53_" class="yellow" d="M33.2,31.9l0.2-0.3c0.2-0.2,0.6-0.3,0.8-0.1l5.3,4.5c0.2,0.2,0.3,0.6,0.1,0.8l-0.2,0.3 c-0.2,0.2-0.6,0.3-0.8,0.1l-5.3-4.5C33,32.5,33,32.1,33.2,31.9z"/>
                              <animate attributeType="CSS"
                                 attributeName="opacity"
                                 attributeType="XML"
                                 dur="0.5s"
                                 keyTimes="0;0.5;1"
                                 repeatCount="indefinite"
                                 values="1;0.6;1"
                                 calcMode="linear"/>
                           </g>
                        </g>
                     </svg>
                  </div>
               </div>
            </div>
         </div>
      </a>
   </li>
</ul>

Метки: выровняйте текст и изображения внутри дивов бок о бок