Блог

Главная - Вопросы по программированию - Проблемы с выравниванием разделов в HTML

Проблемы с выравниванием разделов в HTML

#html #css

Вопрос:

Я столкнулся с проблемой выравнивания разделов/столбцов (я не уверен, что их уместно так называть, но я имею в виду левую/среднюю/правую 33% экрана) в HTML. В качестве левого столбца/раздела я вижу следующее:

 <div class="single-sidebar">
  <h2 class="sidebar-title">Products</h2>

  <div class="thubmnail-recent">
    <img src="img/Product-thumb-21.jpg" class="recent-thumb" alt="">
    <h2><a href="Product21.html">XXX</a></h2>
    <div class="product-sidebar-price">
      <ins>$29.99</ins>
    </div>
  </div>

  <div class="single-sidebar">
    <div class="thubmnail-recent">
      <img src="img/Product-thumb-22.jpg" class="recent-thumb" alt="">
      <h2><a href="Product22.html">YYY</a></h2>
      <div class="product-sidebar-price">
        <ins>$29.99</ins>
      </div>
    </div>
  </div>

</div>

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

 <div class="row">
  <div class="col-sm-6">
    <div class="product-images">
    
      <div class="product-main-img">
        <img id="primary-img" src="img/Product-thumb-30.jpg" alt="" onclick="window.open(this.src)">
      </div>

      <div class="product-gallery">
        <img id="secondary-img" src="img/Product-thumb-109.jpg" alt="" onclick="window.onclick(this.src)">
        <img id="secondary-img" src="img/Product-thumb-110.jpg" alt="" onclick="window.onclick(this.src)">
      </div>


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

Моя проблема в том, что я хотел бы, чтобы левый столбец отображался в крайнем правом углу: а именно, порядок появления должен быть от 1), 2), 3) до 2), 3), 1).
В качестве эксперимента я попытался удалить левую колонку/раздел и заметил, что средняя и правая части страницы на самом деле не сдвигаются влево, а остаются на своем месте, оставляя пустую область слева.
Для справки я также включаю соответствующий код CSS для соответствующих разделов:

 .sidebar-title {
  color: #fead53;
  font-size: 25px;
  margin-bottom: 30px;
  text-transform: uppercase;
}

.single-sidebar {
  margin-bottom: 50px;
}

.product-main-img {
  margin-bottom: 20px;
}

.product-gallery {
  margin-bottom: 25px;
  margin-left: -15px;
  overflow: hidden;
}

Может ли кто-нибудь из вас помочь мне понять, как исправить код так, чтобы средняя и правая части экрана на 33% скользили влево, а содержимое левой части отображалось после двух других разделов?
Большое вам спасибо за помощь!

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

1. Пожалуйста, приведите свой код в нормальную форму для восприятия.

2. Мне трудно следовать вашим описаниям. Пожалуйста, покажите код всех ваших «столбцов» вместе, чтобы мы могли видеть, как вы их размещаете. Пожалуйста, сократите его до необходимых частей, чтобы понять вашу проблему. Вы используете bootstrap? Вы можете определить порядок элементов CSS flex. Вы можете использовать медиа-запросы для создания альтернативной последовательности элементов на небольших экранах.

3. Похоже, что он использует bootstrap — поэтому вы должны пометить это соответствующим образом, а также указать, какую версию вы используете. Bootstrap уже предоставляет классы, которые влияют на порядок столбцов, getbootstrap.com/docs/3.3/css/#grid-column-ordering , getbootstrap.com/docs/5.0/layout/columns/#reordering

Метки: