2

最初の 2 つの div の幅を動的 (コンテンツの幅に合わせて) に設定し、3 番目の div は残りの水平スペースを使用して水平方向にスクロール可能にする方法を教えてください。

私が必要とする結果は、3 つの div がすべて並んでいて、3 番目の div が水平にスクロール可能であることです。

私が持っているスクリプトは次のとおりです

HTML

<div id="a">
  <table>
    <tr><td>text</td></tr>
  </table>
</div>
<div id="b">
  <table>
    <tr><td>text</td></tr>
  </table>
</div>
<div id="c">
  <table>
    <tr><td>text</td></tr>
  </table>
</div>

CSS

div#a
{
float: left;
}
div#b
{
float: left;
}
div#c
{
float: left;
width: 100%;
overflow-x: scroll;
}

上記のスクリプトは div3 を次の行にプッシュしますが、これは望ましくありません。

4

3 に答える 3

3

左にフロートする#aと、残りの親の幅がいっぱいになります。#b#c

#c水平方向にスクロール可能にするには、そのコンテンツ コンテナーを次のようにスタイルします。

#c .scroll-content {

    /* You shouldn't do this on a table, but rather on a wrapping container. */
    display: inline-block;
    white-space: nowrap;
    overflow: auto;
    overflow-y: hidden;
}

JSFiddleで例を作成しました。

于 2013-03-11T03:52:11.827 に答える
2

親 div を設定して、それらをすべて同じ行にまとめる必要があります。代わりに、このようなものが機能するはずです。

<div id="parent">

<div id="a">
  <table>
    <tr><td>text</td></tr>
  </table>
</div>
<div id="b">
  <table>
    <tr><td>text</td></tr>
  </table>
</div>
<div id="c">
  <table>
    <tr><td>text</td></tr>
  </table>
</div>

</div>


div#a
{
float: left;
}
div#b
{
float: left;
}
div#c
{
float: left;
}

#parent{
width: 100%;
overflow-x: scroll;
}

また、コードをリファクタリングすることもできます。すべての div が左に浮いているので、左に浮いているクラスを 1 つだけ使用したい場合があります。これが役立つことを願っています。

于 2013-03-11T03:27:17.483 に答える
0

CSS...

  #a {
float:left;
border:solid 1px #000;
width:33%;
}   

#b {
float:left;
border:solid 1px #000;
width:33%;
}

#c {
float:left;
border:solid 1px #000;
width:33%;
}

.scroll{
float:left;
overflow:auto;
width:100%;
}

.content {
width:1000px;
overflow:auto;
}

そしてHTML...

<div id="a">
This is text within my first content box
</div>

<div id="b">
This is text within my second content box 
</div>

<div id="c">
<div class="scroll-content">
This is text within my third content box and this is horizontal and scrollable
</div>
</div>

以下のJSFIDDLEリンクを再度更新!!!

そしてjsfiddleのデモ- http://jsfiddle.net/GeLqV/1/

マーク、これでうまくいきます。3 つの div すべてを同じ行に配置し、最後の div を水平方向にスクロールできるようにしたいことがわかりました。私のjsfiddleデモを見てください。画面サイズに関係なく、3 つの div はすべてサイズが流動的であり、(ほとんどの場合) 一緒に維持されます。

于 2013-03-11T03:54:32.567 に答える