html - 内部div的宽度仅与outerdiv的可见部分一样宽？

Question

我有一个固定的外部 div(和水平滚动条)。在这个外部 div 中，我有两个 div:一个设置为大于外部 div(从而激活外部 div 的滚动条)，另一个设置为 100%。

第二个内部 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/

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

提前致谢!

Answer 1

将两个 holder div 包装在一个“包装器”div 中，其宽度是动态确定的(就像 holder 之前一样)。将支架宽度更改为 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/

希望对你有帮助