Почему мой правый гибкий столбец внезапно падает ниже левого столбца? - PullRequest
2 голосов
/ 22 марта 2019

Почему мой правый гибкий столбец внезапно падает ниже левого столбца при добавлении (жидкого) содержимого?

Мне нужен левый столбец фиксированной ширины и правый столбец, содержащий ползунок изображения ( Сова Карусель ).

Расположение столбца работает нормально, когда оно пустое, но как только я добавляю ползунок изображения, столбец переходит на 100% ширину и опускается ниже фиксированного столбца. Это странно, поскольку слайдер отзывчив и не должен расширяться за пределы контейнера - он не имеет фиксированной ширины.

Пожалуйста, см. Этот код: https://codepen.io/nick-gilbert/pen/wORaOP

Моя основная структура столбцов очень проста:

<div class="row">

   <div class="col search-sidebar">
      left
   </div>

   <div class="col">
      right
  </div>

</div>

CSS:

.search-sidebar: {
  flex: 0 0 260px;
}

Вот изображение, показывающее проблему (но лучше посмотреть на коде):

enter image description here

1 Ответ

3 голосов
/ 22 марта 2019

Добавить flex-nowrap класс в элементе row.

По умолчанию строка является flex-wrap: wrap, поэтому, когда содержимое становится больше ширины, элементы div складываются. Чтобы избежать их наложения, используйте flex-nowrap класс начальной загрузки.

См. Обновленный codepen

<div class="container">

  <div class="row" style="margin-bottom:40px;">
    <div class="col search-sidebar" style="background-color:aquamarine">left</div>

    <div class="col" style="margin-bottom:20px;background-color:pink">right<br /> (works when empty)
    </div>
  </div>

  <div class="row flex-nowrap">

    <div class="col search-sidebar" style="background-color:aquamarine">
      left<br><br>
    </div>

    <div class="col" style="margin-bottom:20px;background-color:pink">
      right<br />Broken when an Image slider loads. This should stay to the right of the green column.
      <br />

      <!--  Demos -->
      <div id="imageCarousel">
        <div id="imageThumbnails" class="owl-carousel owl-theme">

          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175" />
                        </a>
          </div>

          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175"  />
                        </a>
          </div>
          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175" />
                        </a>
          </div>

          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175"  />
                        </a>
          </div>
          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175" />
                        </a>
          </div>

          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175"  />
                        </a>
          </div>
          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175" />
                        </a>
          </div>

          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175"  />
                        </a>
          </div>
          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175" />
                        </a>
          </div>

          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175"  />
                        </a>
          </div>

        </div>
      </div>
    </div>

  </div>
  <!-- end row -->

</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...