フローティングdivがラップしないようにする

84

ブラウザが狭すぎて収まらない場合に折り返さないdiv（セル）の行が必要です。

Stackを検索しましたが、単純なcssの質問であると思うものに対する実用的な答えが見つかりませんでした。

セルには指定された幅があります。ただし、行の幅は指定したくありません。幅は自動的にその子セルの幅になります。

ビューポートが狭すぎて行を収容できない場合、divはスクロールバーで溢れているはずです。

他の場所で見た多くの解決策を試したので、機能するコードスニペットとして回答を提供してください（幅を指定する：100％で、機能しないようです）。

JavaScriptを使用せずにHTML / CSSのみのソリューションを探しています。

.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>
スニペットを展開

現時点では、行の幅を非常に大きな数にハードコーディングしています。

html  css-float  word-wrap 
— ニコラス
ソース
1
以下の答えの1つはあなたのために働きましたか？私はそれらのどれでも成功していません。
— ジョンフィッツパトリック2012
私はすべての答えを試しましたが、どれもうまくいきませんでした。問題は、2つのフロートした左のdivを中央に配置し、ウィンドウのサイズが変更された後、右側のdivが左下に押されないようにする必要があることでした。
— バシェビス2013
@ニコラス私の例はまさにあなたが探しているものだと思います、私は今日これと同じ問題に遭遇しました。ドロップダウンメニューはオーバーフローしますが、最初の層は折り返されません。
— ジョン

回答:

107

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>
— カルバン
ソース
1
HTMLの先頭に<!DOCTYPE html>または<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">を追加して、IEがデフォルトでquirksモードにならないようにします。
— Cees Timmerman 2013年
4
注：セルタイプのdivをfloat：leftで設定したため、計算されたスタイルがインラインブロックではなくブロックになりました。理解するのに少し時間がかかったので、それを共有するのが最善だと思いました。
— スティーブヒバート2015
これは最後のセルが存在するfloat: right場合は機能しませんね。
— アンディ
3
これは、フロートされたdivがラップしないようにする方法の実際の例ではありません。セルのフロートを解除しただけです。左右のフロートがいくつかあるレイアウトがあるので、ラッピングの問題を解決するためにフロートをなくすことはできません。
— アンディ
ははは、十分に公平です。それは衒学的な区別ですが、あなたは正しいです。「floatdivのラッピングを停止する」は解決しませんでした。「レイアウトを機能させるにはどうすればよいですか」という質問者の本当の質問を解決しました。前者に答えるには：floateddivがラップするのを防ぐ方法はないと合理的に確信しています。質問者と同じように、説明しているレイアウトをエンコードする別の方法を見つける必要があります。
— カルビン
32

min-widthブラウザーのサイズが変更されたときにそれを下回って折り返されないように、行で定義する必要があります。

— farooq
ソース
1
これはフロートでも機能します。それが本当の答えだと思います。
— ダノン2015年
2
@Danonに同意します-これは機能しますが、インラインブロックでは垂直方向の配置の問題が発生しました。
— dlchambers 2015年
1
あなたのニーズに依存します。これにより、ページのサイズが変更されたときにfloat divが折り返されるのを防ぎますが、質問者は「行の幅を指定したくないので、幅は自動的にその子セルの幅になるはずです」と述べました。行の合計幅を計算する必要があるため、手動で幅を指定するには、いくつかの重複作業が必要です。さらに悪いことに、セルの幅が可変である場合（たとえば、セルのサイズがテキストの1行になっているため）、合計を計算することは非現実的または不可能な場合があります。
— カルビン
-1; これは、OPが彼の質問で具体的に述べたこと、つまり幅を指定する必要がないことに反します。上記のCalvinのコメントに+1。
— Teodor Sandu 2017
4

ジョンの答えを読んだ後、私は次のことが私たちのために働いているように見えることを発見しました（幅を指定する必要はありませんでした）：

<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>
— ケビン・ラバンツ
ソース
これにより、iPhoneのドラッグ可能なdivで発生していた問題が修正されました。divに複数の単語が含まれていて、それらが画面の端にドラッグされた場合、divは折り返され、どちらかの行に単語が表示されます。とにかくoverflow: visible; white-space: nowrap;私のためにトリックをしました。ありがとう！
— TryHarder 2015
4
彼が細胞を浮かせなかったので、それはうまくいきました。実際にフローティングdivがラップしないようにするための実際の解決策ではありません
— Andy
1

私はこれを行うことができた唯一の方法は、使用しているoverflow: visible;と、width: 20000px;親要素の上に。私が知っているCSSレベル1でこれを行う方法はなく、CSSレベル3ですべてのガンホーに行く必要があるとは思いませんでした。以下の例には、1920x1200の解像度のLCDを超える18のメニューがあります。 、画面が大きい場合は、最初の層のメニュー要素を複製するか、ブラウザのサイズを変更します。あるいは、ブラウザの互換性のレベルがわずかに低い場合は、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>
— ジョン
ソース
私が賛成の答えを使用width:100%しwidth:1000pxてそれを置き換えると、私にとっては
— うまくいき
@ Nick.McDermaid私は理由で20Kピクセルを使用しましたが、4K画面が出てくると、最終的には8Kなどになることがわかっているので、画面がより高くなるまで、それらの余分な年の間それを機能させ続けるためにめちゃくちゃ高い数で作業するのが最善です-人生そのものよりも解像度。;-)
— ジョン
わかりました...ラッピングをやめることができてうれしいです。CSS-F12ツールを使っても気が狂います。私は誰もがそれらなしで何かを成し遂げた方法を知りません。
— Nick.McDermaid 2015年
1
将来の参考のために：ブラウザはまだ不要な大きなボックスをメモリに保存しているため、大きな幅/高さを使用することは非常に非効率的です。コンテナを設定white-space: nowrap;し、子どもたちにdisplay: inline-block;、既に他の回答で述べたように（またはにフォールバックdisplay: table;してdisplay: table-cell;）。
— gyo 2015年
main > * > * {background-color: #000;}O_O
— theflowersoftime
0

私にとって（ブートストラップを使用して）、機能display:absolute;z-index:1したのは最後のセルに設定することだけでした。

— スピコリン
ソース
1
display:absolute有効なCSSではありません
— caiosm1005 2018
-1

境界領域がfloat：leftブロックと非floatテキストブロックの画像で構成されているという、やや似たような問題がありました。この領域には流体幅があります。テキストは、設計上、画像の右側に沿って折り返されます。問題は、テキストが<h2>タグで始まり、その最初の単語が小さな単語「From」であるということでした。ウィンドウのサイズを小さくすると、フロートされていないテキストは、特定の幅の範囲で、折り返し領域の上部に「From」という単語のみを残し、残りのテキストはフロートの下に押し込まれます。ブロック。私の解決策は、タグの最初の単語の後に続くスペースをこのコード<span style = "opacity：0;"> x </ span>に置き換えることで、タグの最初の単語を大きくすることでした。その効果は、「From」、「FromxNextWord」の代わりに最初の単語を作成することでした。ここで、「x」は見えないので、スペースのように見えました。今、私の最初の単語は、テキストブロックの残りの部分に見捨てられないほど十分に大きかった。

— ジム
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.