0

我有一个固定的外部 div（和水平滚动条）。在这个外部 div 中，我有两个彼此位于下方的 div：一个设置为大于外部 div（从而激活外部 div 的滚动条），一个设置为 100%。

第二个内部 div（100% 宽度）仅与外部 div 可见的宽度一样宽。如果您向左滚动，则 div 会停止，并且不是 100% 的外部 div。

.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/

让它更清楚。有什么办法可以让第二个 div 和第一个 div 一样宽，而不给它一个固定的宽度？第一个 div 是动态生成的，它的宽度决定了外部 div 的宽度。

提前致谢！

4

3 回答 3

1

将两个支架 div 包裹在一个“包装器”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

给你的 div 一个通用类和两个单独的 id 是一种解决方案：

<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 回答
0

看来您想使用 javascript（尝试使用 Jquery）

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

这可能有助于我猜

于 2013-01-04T13:20:54.100 回答