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

У меня проблема, когда плавающий 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
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

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