web-dev-qa-db-ja.com

固定幅DIV内でフローティングDIVを取得して水平方向に継続するには？

高さと幅が固定されたコンテナDIV（275x1000px）があります。このDIVでは、それぞれ幅300pxの複数のフローティングDIVを配置し、水平（x軸）スクロールバーを表示して、ユーザーが左右にスクロールしてすべてを表示できるようにします。

これが私のCSSです。

div#container {
    height: 275px;
    width: 1000px;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: 275px;
}

div#container div.block {
    float: left;
    margin: 3px 90px 0 3px;
}

問題は、フローティングDIVがコンテナの幅を超えて継続しないことです。フローティングDIVを3つ置いた後、下に続きます。 overflow-yをautoに変更すると、垂直スクロールバーが表示され、下にスクロールできます。

これを変更して、フローティングDIVを互いに下に移動させずに続行するにはどうすればよいですか？

csshtmlcss-float
37
Matt McCormick
div#container {
    height: 275px;
    width: 1000px;
    overflow: auto;
    white-space: nowrap;
}

div#container span.block {
    width: 300px;
    display: inline-block;
}

ここでのコツは、Internet Explorerでinline-blockに設定すると、デフォルトでインラインとして動作する要素のみが適切に動作するため、内部コンテナは<div>ではなく<span>である必要があることです。

40
pd.
#row {
    white-space: nowrap; /* important */
    overflow: auto;
}

.items {
    display: inline-block;
}
<div id="row">
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 1" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 2" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 3" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 4" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 5" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 6" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 7" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 8" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 9" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 10" />
    </div>
</div>

ここでのコツは、親の「white-space：nowrap」プロパティです。これは、すべての子要素に水平方向に継続するよう指示するだけで、その子の「display：inline-block」プロパティです。これを機能させるために他のプロパティを追加する必要はありません。

JSフィドル： http://jsfiddle.net/2c4jfetf/

7
praisegeek

ブロックを含めるために幅の広い追加のdivが必要な場合、それらはコンテナdivよりも広く拡張され、新しい行にドロップダウンされません。

HTML：

<div id="container">
    <div id="width">
        <div class="block">
            <!-- contents of block -->
        </div>
        <div class="block">
            <!-- contents of block -->
        </div>
        <div class="block">
            <!-- contents of block -->
        </div>
        <!-- more blocks here -->
    </div>
</div>

CSS：

#container {
    height: 275px;
    width: 1000px;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: 275px;
}
#container #width {
    width:2000px; /* make this the width you need for x number of blocks */
}
#container div.block {
    float: left;
    margin: 3px 90px 0 3px;
}
7
Matthew James Taylor

フローティングdivを幅の広い別のdivでラップします。

<div style="width:230px;overflow-x:auto;background-color:#ccc;">
    <div style="width:400px">
        <div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>
        <div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>
        <div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>
    </div>
</div>
1
Emily

つかいます：

    div#container {
        overflow: auto;
    }

または、スタイルを持つ3つのdivの下にクリアdivを追加します。

    {
        clear: both
    }
0
Rony

スクロールするdivを次のようにテーブルに配置します。

<div style='width:1000;border:2 solid red;overflow-x:auto'>
   <table><tr>
      <td><div style='width:300;height:200;border:1 solid black'>Cell 1&nbsp;</div></td>
      <td><div style='width:300;height:200;border:1 solid black'>Cell 2&nbsp;</div></td>
      <td><div style='width:300;height:200;border:1 solid black'>Cell 3&nbsp;</div></td>
      <td><div style='width:300;height:200;border:1 solid black'>Cell 4&nbsp;</div></td>
      <td><div style='width:300;height:200;border:1 solid black'>Cell 5&nbsp;</div></td>
   </tr></table>
</div>

編集：これらの提案された解決策のうち3つを試しました-それらはすべてGoogleで正常に動作しますChrome-しかし、最初の1つ（container1）はIE（図を参照）-SPANソリューションが私の票を獲得します:-)：

<html>
<body>
<style>
div#container1 
   {
   height: 275px;
   width: 100%;
   overflow: auto;
   white-space: nowrap;
   border:2 solid red;
   }

div#container1 div.block 
   {
   width: 300px;
   height: 200px;
   display: inline-block;
   border: 1 solid black;
   }

div#container2 
   {
   height: 275px;
   width: 100%;
   overflow: auto;
   white-space: nowrap;
   border:2 solid red;
   }

div#container2 span.block 
   {
   width: 300px;
   height: 200px;
   display: inline-block;
   border: 1 solid black;
   }

div#container3 
   {
   height: 275px;
   width: 100%;
   overflow: auto;
   white-space: nowrap;
   border:2 solid red;
   }

div#container3 div.block 
   {
   width: 300px;
   height: 200px;
   display: inline-block;
   border: 1 solid black;
   }

</style>
<p>
<div id='container1'>
      <div class='block'>Cell 1&nbsp;</div>
      <div class='block'>Cell 2&nbsp;</div>
      <div class='block'>Cell 3&nbsp;</div>
      <div class='block'>Cell 4&nbsp;</div>
      <div class='block'>Cell 5&nbsp;</div>
</div>
<p>
<div id='container2'>
      <span class='block'>Cell 1&nbsp;</span>
      <span class='block'>Cell 2&nbsp;</span>
      <span class='block'>Cell 3&nbsp;</span>
      <span class='block'>Cell 4&nbsp;</span>
      <span class='block'>Cell 5&nbsp;</span>
</div>
<p>
<div id='container3'>
   <table><tr>
      <td><div class='block'>Cell 1&nbsp;</div></td>
      <td><div class='block'>Cell 2&nbsp;</div></td>
      <td><div class='block'>Cell 3&nbsp;</div></td>
      <td><div class='block'>Cell 4&nbsp;</div></td>
      <td><div class='block'>Cell 5&nbsp;</div></td>
   </tr></table>
</div>
</body>
</html>

編集2：

このテストページをbrowsershots.orgで実行し、さまざまなブラウザーがどのように処理するかを確認しました。結論：ブラウザの互換性はまずいです。 :-)

http://browsershots.org/http://dot-dash-dot.com/files/test_div2.htm

テーブルソリューションはより頻繁に機能しましたが、spanオプション（よりクリーン）は、私が聞いたことのないブラウザーでのみ壊れました。 :-)

0
Ron Savage

テーブルソリューションは非常にうまく機能するはずです。

テーブルを使用したくない場合は、すべての.block divを#container内の別のdivに配置し、ページの読み込み後にjavascriptを使用して「in-between-div」に固定-計算-幅を指定することもできます。

もちろん、.blockの数がすでにわかっている場合、またはその数が固定されている場合は、cssを使用して「in-between-div」に固定幅を与えることができます。

0
jeroen

私の元恋人：

div幅：850px gridview templatedcolumn ItemTemplate

<span class="buttonspanlt"></span><asp:Button ID="imgEditSave" runat="server" Text="Edit SubStatus" CssClass="buttoncenter" OnClick="imgEditSave_OnClick"/><span class="buttonspanrt"></span>
<span style="display:none;float:left;clear:left;" id="spangrdCancel" runat="server"><span class="buttonspanlt"></span><asp:Button ID="imgCancel" runat="server" Text="Cancel" class="buttoncenter"/><span class="buttonspanrt"></span></span>

終了ItemTemplate終了templatedcolumn終了gridview終了div

ボタンには、固定幅の外側のdivがあったのでフローティングしない左中央（実際のボタン）の右スパンがあります。

Buttonの外側、itemtemplateの内側で幅140pxの追加のdivを使用する必要があり、それが機能しました。

お役に立てれば！！！

ハリッシュ、ありがとう

0
user2639797

Divでギャラリーをしているようですね。

Divを正確に使用しているのは何ですか？

フローティングdivの頭痛の種なしで同じ効果を得るには、liの内側のスパンでul/liを使用する方が簡単かもしれません。

0
SkyLar