【问题标题】：make inner div wider than the outer div使内部 div 比外部 div 宽
【发布时间】：2016-05-25 08:13:56
【问题描述】：

我有两个 div。外部 div 的名称是 scroll_main ，内部 div 是 scroll_holder 。外部 div 的宽度为 750 像素，溢出设置为自动。在内部 div 中，我添加了一些具有固定宽度和高度的 div，并向左浮动。所以我想使内部 div 的宽度自动，以便内部部分的所有包含 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>

这是我尝试应用的 css

.scroll_main {
  height: 450px;
  margin: 0 auto;
  max-width: 97%;
  overflow: auto;
  position:relative;

  width:750px
}
 .scroll_holder{overflow:hidden; margin:5px; width:750px; overflow:auto }

【问题讨论】：

标签： jquery html css width

【解决方案1】：

选项 1

here 是我认为您正在寻找的东西（尽管尺寸较小）：

#images {
    overflow-y:hidden;
    overflow-x:scroll;
    height:80px;
    width:150px;
    border:solid 1px #c4c4c4;
}
#images2
{

    width:300px;
}

#images img
{
    display:block;
    padding:5px;
    cursor:pointer;
float:left;
}

选项 2

this 演示了使用此 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;
}

如果您将其用于图像，这也允许使用缩略图。

另一个选项是使用 no-wrap 来阻止 div 包装

【讨论】：

是的，问题是如果我增加项目然后它就不会显示

【解决方案2】：

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;
}

Codepen Example

【讨论】：

我个人建议不要使用!important标签。

【解决方案3】：

研究样式属性overflow-y和overflow-x，尽量避免DIV与固定宽度或高度绝对位于 DIV 内，具有自动或可变宽度或高度，没有最小高度或已定义，两个 DIVS 都不会显示在某些浏览器（Internet Explorer）中：)

【讨论】：

如果对答案投反对票的用户添加了他或她为什么这样做的评论，它可以帮助他的答案被否决的用户了解如何以更有帮助的方式回答问题。 .