У меня проблема, когда плавающий 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? Или виноват сам поплавок?
@TemaniAfif Есть ли способ сделать это при сохранении плавающего положения?
Я так не думаю .. кстати, а зачем вам поплавок? это настоящий вопрос
@TemaniAfif Как вы думаете, использование float - плохой стиль? следует ли этого избегать, когда это возможно?
Я бы избегал слова плохой. Float используется для размещения элементов, поэтому это зависит от вашей ситуации. Если вы используете float для создания своего макета, вы, вероятно, делаете это неправильно, и вам нужно подумать о лучших способах (flexbox, grid, inline-block и т. д.), Но в некоторых случаях вам нужно поведение float, поэтому вы должны его использовать ... Вот почему я спрашивал, действительно ли вам нужно float ... в этом конкретном случае я не вижу необходимости в float, потому что вы хотите, чтобы два блока располагались рядом, и это идеальный вариант использования встроенные блочные элементы.
Простое исправление - преобразовать 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 из-за наследования ... вы должны вернуть пустое пространство в нормальное состояние во внутреннем контейнере, удалить его, и вы увидите эффект плохой
Спасибо за вашу помощь! Я немного подожду, прежде чем согласиться, но похоже, что ваше решение работает.
Если вы не возражаете против одной дополнительной оболочки под #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>
но таблица здесь сузится и прокрутки у нас не будет
Да, он будет сжиматься до точки, в которой больше не может, и тогда прокрутка сработает.
Да, виноват сам поплавок ... удаление поплавка упростит