0

外側の div に固定 (およびスクロール バーが水平) があります。この外側の div 内には、互いに 2 つの div があります。1 つは外側の div よりも大きく設定され (したがって、外側の div のスクロール バーがアクティブになります)、もう 1 つは 100% に設定されます。

2 番目の内側の div (幅 100%) は、外側の div が表示される幅と同じだけです。左にスクロールすると、div が停止し、外側の div の 100% ではありません。

.parent{
     white-space:nowrap;
    overflow:scroll;
    width:200px;
    } 

.holder {
    width: 500px;
    background: url(http://www.w3schools.com/cssref/paper.gif); } 

.holder1 {
    width: inherit;
    background: blue; } 

.holder> div{
   display:inline-block;
   white-space:normal;
   background:red;
}​


<div class="parent">
    <div class="holder">
        <div>1</div>
    </div>
    <br>
    <div class="holder1">
        <div>1</div>
    </div>
    <br>
</div>

私は JSfiddle を持っています: http://jsfiddle.net/EUtLh/16/

より明確にするために。固定幅を与えずに、2 番目の div を最初の div と同じ幅にする方法はありますか? 最初の div は動的に作成され、その幅によって外側の div の幅が決まります。

前もって感謝します！

4

3 に答える 3

1

幅が動的に決定される「ラッパー」div で 2 つのホルダー div をラップします (以前のホルダーと同様)。ホルダーの幅を 100% に変更すると、「含む」div の幅と同じ幅になります。

<div class="parent">

 *<div class="wrapper">*

  <div class="holder">
      <div>1</div>
  </div><br>
  <div class="holder1">
     <div>1</div>
  </div>

 *</div>*

</div>

CSS:
.wrapper {
   width:500px;
}
.holder {
   width: 100%;
   background: url(http://www.w3schools.com/cssref/paper.gif);
}
.holder1 {
   width: 100%;
   background: blue;
}

http://jsfiddle.net/EUtLh/29/

お役に立てれば

于 2013-01-04T19:45:54.063 に答える
0

javascriptを使用したいようです（Jqueryで試してみてください）

$('.holder1').width($('.holder').width());​

これは私が推測するのに役立つかもしれません

于 2013-01-04T13:20:54.100 に答える
0

div に 1 つの共通クラスと 2 つの個別の ID を与えることは、1 つの解決策です。

<div class="parent">
    <div class="holderClass" id="holder">
         <div>1</div>
    </div><br>
    <div class="holderClass" id="holder1">
         <div>2</div>
    </div>
</div>

CSS の場合:

.parent{
    white-space:nowrap;
    overflow:scroll;
    width:200px;
    }
.holderClass {
    width: 500px;
}
#holder{
    background: url(http://www.w3schools.com/cssref/paper.gif);
}
#holder1 {
    background: blue;
}
于 2013-01-04T13:24:29.647 に答える