Jquery 使内div比外div宽

我有两个div。外部div的名称为scroll\u main，内部div的名称为scroll\u holder。外部div的宽度为750px，溢出设置为自动。在内部div中，我添加了一些具有固定宽度和高度的div，并向左浮动。所以我想使内部div的宽度自动，以便内部部分的所有contain div显示在一行中。我想从左向右滚动。可能吗？谢谢

这是html

<div class="scroll_main">
    <div class="scroll_holder">
        <div style="width:400px; height:400px; background:#333; float:left; margin:10px"></div>
        <div style="width:400px; height:400px; background:#999; float:left;margin:10px"></div>
        <div style="width:400px; height:400px; background:#ccc; float:left;margin:10px"></div>
        <div style="width:400px; height:400px; background:#22b1b5; float:left;margin:10px"></div>
        <div style="width:400px; height:400px; background:#333; float:left; margin:10px"></div>
        <div style="width:400px; height:400px; background:#999; float:left;margin:10px"></div>
    </div>
</div>  

选择1 这是我认为您正在寻找的（尽管尺寸较小）：

---

选择2 演示使用此css的另一种技术：

div {
    overflow:hidden;

}
#frame {
    width:600px;

    padding:8px;
    border:1px solid black;
}
#thumbnails_container {

    border:1px solid black;
    padding:4px;
    overflow-x:scroll;
        height:200px;
}
.thumbnail {
    border:1px solid black;
    margin-right:4px;
    width:100px; height:75px;
    float:left;
}
.thumbnail img {
    width:100px; height:710px;
}

这也允许缩略图，如果你使用它的图像

---

另一种选择是使用

不换行

来阻止div换行

研究样式属性溢出-y和溢出-x，尽量避免将固定宽度或高度的DIV绝对放置在自动或可变宽度或高度的DIV中，而没有最小高度或已定义，这两个DIV在某些浏览器中都不会显示（internet explorer）：

CSS

.scroll_main {
  height:450px;
  margin:0 auto;
  max-width:97%;
  overflow:auto;
  position:relative;
  width:750px
}
 .scroll_holder{
   margin:5px;
   white-space:nowrap;
 }
.scroll_holder div {
  float:none !important;
  display:inline-block;
}

---

是的，问题是如果我增加了项目，那么它就没有显示出来。如果投票否决答案的用户添加了一条评论，说明他或她为什么这样做，它可能会帮助投票否决答案的用户理解如何以更有用的方式回答问题……我个人建议不要使用

！重要信息

标记。

div {
    overflow:hidden;

}
#frame {
    width:600px;

    padding:8px;
    border:1px solid black;
}
#thumbnails_container {

    border:1px solid black;
    padding:4px;
    overflow-x:scroll;
        height:200px;
}
.thumbnail {
    border:1px solid black;
    margin-right:4px;
    width:100px; height:75px;
    float:left;
}
.thumbnail img {
    width:100px; height:710px;
}

.scroll_main {
  height:450px;
  margin:0 auto;
  max-width:97%;
  overflow:auto;
  position:relative;
  width:750px
}
 .scroll_holder{
   margin:5px;
   white-space:nowrap;
 }
.scroll_holder div {
  float:none !important;
  display:inline-block;
}