Как предотвратить перемещение плавающего блока под другим плавающим блоком при изменении ширины браузера?

У меня проблема, когда плавающий div перемещается под другим плавающим div при изменении ширины браузера. Я создал пример такого поведения в jsfiddle (ниже), в котором я использую фиктивный текст и фиктивную таблицу. Если вы откроете jsfiddle и измените ширину области отображения, вы увидите, что в конечном итоге правый div (таблица) перемещается под левый div (текст).

https://jsfiddle.net/p7yr5t4u/23/

.view {
  float: left;
  position: relative;
  height: 100%; 
}

#A {
  width: 200px;
}

В идеале я бы хотел, чтобы правый div отображал горизонтальную полосу прокрутки при изменении ширины браузера, и чтобы он оставался справа, а не перемещался под левым div. Я попытался установить "overflow-x: auto" в div, но безрезультатно. Как сделать так, чтобы в таблице справа отображалась горизонтальная полоса прокрутки, вместо того, чтобы перемещать ее под текстом слева?

Я исследовал переполнение стека для этой проблемы и нашел эта ветка, а также эта ветка. Единственное решение, которое я мог найти, это то, что float представляет собой проблему, и трудно добиться желаемого поведения, когда divs перемещаются. Есть ли способ получить желаемый результат, сохранив макет float? Или виноват сам поплавок?

Да, виноват сам поплавок ... удаление поплавка упростит

Temani Afif 13.09.2018 21:33

@TemaniAfif Есть ли способ сделать это при сохранении плавающего положения?

ktm5124 13.09.2018 21:56

Я так не думаю .. кстати, а зачем вам поплавок? это настоящий вопрос

Temani Afif 13.09.2018 21:58

@TemaniAfif Как вы думаете, использование float - плохой стиль? следует ли этого избегать, когда это возможно?

ktm5124 13.09.2018 22:59

Я бы избегал слова плохой. Float используется для размещения элементов, поэтому это зависит от вашей ситуации. Если вы используете float для создания своего макета, вы, вероятно, делаете это неправильно, и вам нужно подумать о лучших способах (flexbox, grid, inline-block и т. д.), Но в некоторых случаях вам нужно поведение float, поэтому вы должны его использовать ... Вот почему я спрашивал, действительно ли вам нужно float ... в этом конкретном случае я не вижу необходимости в float, потому что вы хотите, чтобы два блока располагались рядом, и это идеальный вариант использования встроенные блочные элементы.

Temani Afif 13.09.2018 23:04
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
5
39
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Простое исправление - преобразовать float в inline-block и использовать white-space:nowrap:

.container {
 white-space:nowrap;
}
.view {
  white-space:normal;
  display: inline-block;
  vertical-align:top;
  position: relative;
  height: 100%;
}

#A {
  width: 200px;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
<div class = "container">

  <div id = "A" class = "view">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>

  <div id = "B" class = "view">
    <table>
      <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
      </tr>
      <tr>
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
      </tr>
      <tr>
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
      </tr>
      <tr>
        <td>Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
      </tr>
      <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
    </table>
  </div>

</div>

Похоже, это решение могло сработать! Один вопрос: зачем нам устанавливать свойство white-space (как в контейнере, так и в представлении)?

ktm5124 13.09.2018 22:27

@ ktm5124 из-за наследования ... вы должны вернуть пустое пространство в нормальное состояние во внутреннем контейнере, удалить его, и вы увидите эффект плохой

Temani Afif 13.09.2018 22:28

Спасибо за вашу помощь! Я немного подожду, прежде чем согласиться, но похоже, что ваше решение работает.

ktm5124 13.09.2018 22:33

Если вы не возражаете против одной дополнительной оболочки под #B и действительно хотите использовать числа с плавающей запятой, вы можете сделать это следующим образом. Я взял эти 200 пикселей #A как «константу», поскольку вы использовали их в своем примере.

.view {
  float: left;
  position: relative;
  height: 100%;
}

#A {
  width: 200px;
}

#B {
  box-sizing: border-box;
  margin-left: -200px;
  padding-left: 200px;
  width: 100%;
}
#C {
  overflow-x: auto;
}

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
<div>

<div id = "A" class = "view">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div id = "B" class = "view">
<div id = "C">
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>
<div>
</div>
</div>

</div>

но таблица здесь сузится и прокрутки у нас не будет

Temani Afif 13.09.2018 22:03

Да, он будет сжиматься до точки, в которой больше не может, и тогда прокрутка сработает.

Mirous 13.09.2018 22:06

Другие вопросы по теме