如何使 div 正确增长而不是向下增长

Question

如何使这样的 div 向右而不是向下增长？我想要图像列表的恒定高度，并且我想要一个滚动条以根据需要进行水平滚动。

http://jsfiddle.net/8J2KM/

<div style="width:700px;height:130px;overflow-x:auto;">
<div style="height:130px;overflow:hidden;">
<a href="javascript:void();">   
    <div style="width:auto;height:100px;display:inline-block;margin-right:10px;color:#888;">
        <img src="/cloudsign/web/images/layoutTemplate/8.png" alt="test1" style="border:solid 0px transparent;padding:9px 0px;width:130px;height:73px;" />
        <br />test1
</div>
</a>
<a href="javascript:void();">   
    <div style="width:auto;height:100px;display:inline-block;margin-right:10px;color:#888;">
    <img src="/cloudsign/web/images/layoutTemplate/9.png" alt="test1" style="border:solid 0px transparent;padding:9px 0px;width:130px;height:73px;" />
        <br />test1
    </div>
</a>
<a href="javascript:void();">   
    <div style="width:auto;height:100px;display:inline-block;margin-right:10px;color:#888;">
        <img src="/cloudsign/web/images/layoutTemplate/10.png" alt="test1" style="border:solid 0px transparent;padding:9px 0px;width:130px;height:73px;" />
        <br />test1
    </div>
</a>
    <a href="javascript:void();">   
        <div style="width:auto;height:100px;display:inline-block;margin-right:10px;color:#888;">
            <img src="/cloudsign/web/images/layoutTemplate/11.png" alt="test1" style="border:solid 0px transparent;padding:9px 0px;width:130px;height:73px;" />

            <br />
            test1
        </div>
    </a>

    <div style="width:auto;height:100px;display:inline-block;margin-right:10px;border:solid 3px transparent;padding:3px;color:black;font-weight:bold;">
        <img src="/cloudsign/web/images/layoutTemplate/13.png" alt="test1" style="border:solid 3px black;padding:3px;width:130px;height:73px;" />
        <br />
        test1
    </div>

    <a href="javascript:void();">   
        <div style="width:auto;height:100px;display:inline-block;margin-right:10px;color:#888;">
            <img src="/cloudsign/web/images/layoutTemplate/14.png" alt="test1" style="border:solid 0px transparent;padding:9px 0px;width:130px;height:73px;" />

            <br />
            test1
        </div>
    </a>

    <a href="javascript:void();">   
        <div style="width:auto;height:100px;display:inline-block;margin-right:10px;color:#888;">
            <img src="/cloudsign/web/images/layoutTemplate/15.png" alt="test1" style="border:solid 0px transparent;padding:9px 0px;width:130px;height:73px;" />

            <br />
            test1
        </div>
    </a>


        </div>
    </div>
</div>

Answer 1

您可以将包装 div 的大小增加到 300% 或您需要多少，或者只需将 white-space:nowrap 添加到包装 div 并为内部包装 div 指定 overflow-x:scroll。在最外层的 div 中不需要 overflow:auto。 所以前两个div：

<div style="width:700px;height:135px;white-space:nowrap">
<div style="height:135px;overflow-x:scroll;">

JSFiddle：http://jsfiddle.net/LnApB/

同时修改这两个div的高度以适应图片+标题的高度。 当然，正如其他人已经指出的那样，整理您的 html，将您的样式放在单独的样式表中以提高可读性和可维护性。

Answer 2

好的，让我们整理一下！

HTML：

<div id="container"> 
   <a href="javascript:void();"> <!-- Have as many as you want. Copy -> paste. -->
   <div class="block">
      <img src="/cloudsign/web/images/layoutTemplate/15.png" alt="test1" />
      <br />test1
   </div>
   </a>
</div>

CSS：

#container {
    width: 100%;
    overflow: auto;
    height: 150px;
    white-space:nowrap;
}
.block {
    width:auto;
    height:100px;
    display:inline-block;
    margin-right:10px;
    color:#888;
}
img {
    border:solid 0px transparent;
    padding:9px 0px;
    width:130px;
    height:73px;
}

DEMO HERE

这包括一个修复，看看你是否出错了。请尝试不将您的 CSS 放入 HTML。它只会让你自己的生活更加艰难，使用课程.testClass 或 id 的#testID

希望对你有所帮助。

Answer 3

为了保持item div“正确增长”，您需要将父容器的width 定义为包含其内容的最大宽度（即所有子项的总宽度）。

有多种可能的方法，请查看 this fiddle 了解选项。

顺便说一句，建议分离您的样式，这样它们就不会被内联，除了可以大大提高维护和控制代码的能力之外，它的效率也更高。

Answer 4

 <div style="width:300px;overflow:auto;">

 </div>

把你的代码放在这个 div 里面

我在这里更新了 jsfiddle 检查它。

http://jsfiddle.net/8J2KM/2/

Answer 5

在你的html中删除<br/>然后它会水平增长。我已经改变了js小提琴。看看。

DEMO HERE