Question

我怎样才能使这样的div成为正确而不是向下？我想要一个恒定的图像列表高度，我想要一个滚动条来根据需要进行水平滚动。

<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或者#testID

希望这会对你有所帮助。

Answer 3

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

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

另外，分离你的样式所以建议它们不是内联的，除了能够提高维护和控制代码的能力之外，它还要高效得多。

Answer 4

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

DEMO HERE

Answer 5

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

 </div>

将您的代码放在此div

中

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

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

如何使div成长而不是下降

5 个答案:

HTML：

CSS：