Остановите плавающие дивы от переноса - PullRequest
Новая
       33

Остановите плавающие дивы от переноса

80 голосов
/ 11 апреля 2011

Я хочу иметь ряд div (ячеек), которые не переносятся, если браузер слишком узок, чтобы соответствовать им.

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

Ячейки имеют указанную ширину.Однако я не хочу указывать ширину строки, ширина должна автоматически быть шириной ее дочерних ячеек.

Если область просмотра слишком узкая, чтобы вместить строки, то div должен переполниться полосами прокрутки.

Пожалуйста, предоставьте ваш ответ в виде рабочего кода, так как я пробовал множество решенийЯ видел в другом месте (например, укажите ширину: 100%, и они, кажется, не работают).

Я ищу решение только для HTML / CSS, без JavaScript. 

.row {
  float: left;
  border: 1px solid yellow;
  width: 100%;
  overflow: auto;
}
.cell {
  float: left;
  border: 1px solid red;
  width: 200px;
  height: 100px;
}
<div class="row">
  <div class="cell">a</div>
  <div class="cell">b</div>
  <div class="cell">c</div>
</div>

В настоящий момент я на самом деле тяжело кодирую ширину строки в действительно большое число.

Ответы [ 6 ]

102 голосов
/ 13 июня 2012

Свойство CSS display: inline-block было разработано для удовлетворения этой потребности.Вы можете прочитать немного об этом здесь: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Ниже приведен пример его использования.Ключевыми элементами являются то, что элемент row имеет white-space: nowrap, а элементы cell имеют display: inline-block.Этот пример должен работать в большинстве основных браузеров;таблица совместимости доступна здесь: http://caniuse.com/#feat=inline-block

<html>
<body>
<style>

.row {
    float:left;
    border: 1px solid yellow;
    width: 100%;
    overflow: auto;
    white-space: nowrap;
}

.cell {
    display: inline-block;
    border: 1px solid red;
    width: 200px;
    height: 100px;
}
</style>

<div class="row">
    <div class="cell">a</div>
    <div class="cell">b</div>
    <div class="cell">c</div>
</div>


</body>
</html>
30 голосов
/ 10 июля 2011

Вы хотите определить min-width в строке, чтобы при изменении размера браузера он не опускался ниже этого значения и не переносился.

3 голосов
/ 31 октября 2014

Прочитав ответ Джона, я обнаружил, что следующее работает для нас (не требует указания ширины): 

<style>
.row {
    float:left;
    border: 1px solid yellow;
    overflow: visible;
    white-space: nowrap;
}

.cell {
    display: inline-block;
    border: 1px solid red;
    height: 100px;
}
</style>

<div class="row">
    <div class="cell">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </div>
    <div class="cell">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </div>
    <div class="cell">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </div>
</div>
0 голосов
/ 01 февраля 2017

Для меня (с помощью начальной загрузки) единственное, что сработало, это установка display:absolute;z-index:1 в ячейку last .

0 голосов
/ 20 сентября 2014

Единственный способ, которым мне удалось это сделать, - использовать overflow: visible; и width: 20000px; в родительском элементе. Нет никакого способа сделать это с уровнем CSS 1, о котором я знаю, и я отказался думать, что мне придется идти вразрез с уровнем CSS 3. Пример ниже имеет 18 меню, которые выходят за рамки моего разрешения ЖК-дисплея 1920x1200 , если ваш экран больше, просто продублируйте элементы меню первого уровня или просто измените размер браузера. В качестве альтернативы и с немного более низким уровнем совместимости браузера вы можете использовать медиазапросы CSS3.

Вот пример демонстрации полного копирования / вставки ... 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>XHTML5 Menu Demonstration</title>
<style type="text/css">
* {border: 0; box-sizing: content-box; color: #f0f; font-size: 10px; margin: 0; padding: 0; transition-property: background-color, background-image, border, box-shadow, color, float, opacity, text-align, text-shadow; transition-duration: 0.5s; white-space: nowrap;}
a:link {color: #79b; text-decoration: none;}
a:visited {color: #579;}
a:focus, a:hover {color: #fff; text-decoration: underline;}
body {background-color: #444; overflow-x: hidden;}
body > header {background-color: #000; height: 64px; left: 0; position: absolute; right: 0; z-index: 2;}
body > header > nav {height: 32px; margin-left: 16px;}
body > header > nav a {font-size: 24px;}
main {border-color: transparent; border-style: solid; border-width: 64px 0 0; bottom: 0px; left: 0; overflow-x: hidden !important; overflow-y: auto; position: absolute; right: 0; top: 0; z-index: 1;}
main > * > * {background-color: #000;}
main > section {float: left; margin-top: 16px; width: 100%;}
nav[id='menu'] {overflow: visible; width: 20000px;}
nav[id='menu'] > ul {height: 32px;}
nav[id='menu'] > ul > li {float: left; width: 140px;}
nav[id='menu'] > ul > li > ul {background-color: rgba(0, 0, 0, 0.8); display: none; margin-left: -50px; width: 240px;}
nav[id='menu'] a {display: block; height: 32px; line-height: 32px; text-align: center; white-space: nowrap;}
nav[id='menu'] > ul {float: left; list-style:none;}
nav[id='menu'] ul li:hover ul {display: block;}
p, p *, span, span * {color: #fff;}
p {font-size: 20px; margin: 0 14px 0 14px; padding-bottom: 14px; text-indent: 1.5em;}
.hidden {display: none;}
.width_100 {width: 100%;}
</style>
</head>

<body>

<main>
<section style="height: 2000px;"><p>Hover the first menu at the top-left.</p></section>
</main>

<header>
<nav id="location"><a href="">Example</a><span> - </span><a href="">Blog</a><span> - </span><a href="">Browser Market Share</a></nav>
<nav id="menu">
<ul>
<li><a href="" tabindex="2">Menu 1 - Hover</a>
<ul>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
</ul>
</li>
<li><a href="" tabindex="2">Menu 2</a></li>
<li><a href="" tabindex="2">Menu 3</a></li>
<li><a href="" tabindex="2">Menu 4</a></li>
<li><a href="" tabindex="2">Menu 5</a></li>
<li><a href="" tabindex="2">Menu 6</a></li>
<li><a href="" tabindex="2">Menu 7</a></li>
<li><a href="" tabindex="2">Menu 8</a></li>
<li><a href="" tabindex="2">Menu 9</a></li>
<li><a href="" tabindex="2">Menu 10</a></li>
<li><a href="" tabindex="2">Menu 11</a></li>
<li><a href="" tabindex="2">Menu 12</a></li>
<li><a href="" tabindex="2">Menu 13</a></li>
<li><a href="" tabindex="2">Menu 14</a></li>
<li><a href="" tabindex="2">Menu 15</a></li>
<li><a href="" tabindex="2">Menu 16</a></li>
<li><a href="" tabindex="2">Menu 17</a></li>
<li><a href="" tabindex="2">Menu 18</a></li>
</ul>
</nav>
</header>

</body>
</html>
0 голосов
/ 11 мая 2013

У меня была похожая проблема, когда ограниченная область состояла из изображения с плавающей точкой: левый блок и текст без блока с плавающей точкой. Область имеет ширину жидкости. Текст, по замыслу, будет оборачиваться вдоль правой стороны изображения. Проблема состояла в том, что текст начинался с тега

, первое слово которого - крошечное слово «От». Поскольку я изменил размер окна до меньшей ширины, для неперемещенного текста в определенном диапазоне ширины оставалось бы только слово «От» в верхней части области переноса, а остальной текст был сжат под плавающей точкой. блок. Мое решение состояло в том, чтобы сделать первое слово тега больше, заменив пробел, следующий за ним, следующим кодом: x . Результатом было создание первого слова вместо «From», «FromxNextWord», где «x», будучи невидимым, выглядело как пробел. Теперь мое первое слово было достаточно большим, чтобы его нельзя было оставить остальным текстовым блоком.

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

Похожие темы

...