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

将两个支架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/

希望这会有所帮助

Answer 2

似乎你想使用javascript（试试Jquery）

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

这可能对我有帮助

Answer 3

给你的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;
}

内部div的宽度只有outerdiv的可见部分宽？

3 个答案: