水平滚动css？

我想有一个<div>与水平滚动的id，但问题是它必须是响应，而不是固定的宽度。水平滚动css？

html, body {margin: 0; padding: 0;} 

#myWorkContent{ 
    width:530px; 
    height:210px; 
    border: 13px solid #bed5cd; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    white-space: nowrap; 
} 

#myWorkContent a { 
    display: inline-block; 
    vertical-align: middle; 
} 

#myWorkContent img {border: 0;}

<div id="myWorkContent"> 
    <a href="assets/work/1.jpg"><img src="http://placekitten.com/200/200/" height="190"></a> 
    <a href="assets/work/2.jpg"><img src="http://placekitten.com/120/120/"/></a> 
    <a href="assets/work/3.jpg"><img src="http://placekitten.com/90/90/" height="90" width="90"></a> 
    <a href="assets/work/4.jpg"><img src="http://placekitten.com/50/50/" height="190"></a> 
    <a href="assets/work/5.jpg"><img src="http://placekitten.com/100/100/"></a> 
    <a href="assets/work/6.jpg"><img src="http://placekitten.com/200/200/" height="190"></a> 
</div><!-- end myWorkContent -->

由于http://jsfiddle.net/clairesuzy/FPBWr/

的问题是与530px。我想用100％代替。但后来我得到了页面滚动和滚动的DIV正确的，不能得到它，任何想法？

这里是关于解决 http://www.blog.play2web.com/index.php?id=18

来源

2013-10-08 Miomir Dancevic

您的宽度正好被设置为自动：

#myWorkContent{ 
    width: auto; 
    height:210px; 
    border: 13px solid #bed5cd; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    white-space: nowrap; 
}

这样，你的DIV可以和possi一样宽可以添加尽可能多的小猫图片; 3

您div的宽度将根据其包含的子元素进行扩展。

jsFiddle

来源

2013-10-08 19:57:21 nkmol

+1。问题是DIV的边框增加到了100％。 “自动”是正确的做法。 –

这取决于。如果内容不够，'width：auto;'会调整为小于100％。如果他希望**总是** 100％的宽度，他应该按照我的回答在下面设置'box-sizing'属性。 –

文章中塞尔维亚只要确保你添加box-sizing:border-box;您#myWorkContent。

http://jsfiddle.net/FPBWr/160/

来源

2013-10-08 19:55:21

在这个例子中，我将'height：210px;'替换为'height：auto;'以便图片不会被截断。 –

使用最大宽度，而不是宽度

max-width:530px;

演示：http://jsfiddle.net/FPBWr/161/

来源

2013-10-08 19:55:54 user1

我想这样说：

* { padding: 0; margin: 0 } 
body { height: 100%; white-space: nowrap } 
html { height: 100% } 

.red { background: red } 
.blue { background: blue } 
.yellow { background: yellow } 

.header { width: 100%; height: 10%; position: fixed } 
.wrapper { width: 1000%; height: 100%; background: green } 
.page { width: 10%; height: 100%; float: left } 

<div class="header red"></div> 
<div class="wrapper"> 
    <div class="page yellow"></div> 
    <div class="page blue"></div> 
    <div class="page yellow"></div> 
    <div class="page blue"></div> 
    <div class="page yellow"></div> 
    <div class="page blue"></div> 
    <div class="page yellow"></div> 
    <div class="page blue"></div> 
    <div class="page yellow"></div> 
    <div class="page blue"></div> 
</div>

我有1000％的包装材料，并在各10％的10个网页。我设置了我仍然有“页”，其中每个都是100％的窗口（彩色编码）。你可以用800％的包装纸做八页。我想你可以忽略这些颜色，并在继续页面上。我还设置了一个固定标题，但这不是必需的。希望这可以帮助。

来源

2014-05-22 00:10:13 user3662981

下面为我工作。

高度&宽度表示，如果你2个这样的孩子，它会水平滚动，因为孩子的高度大于父母的高度垂直滚动。

家长CSS：

.divParentClass { 
    width: 200px; 
    height: 100px; 
    overflow: scroll; 
    white-space: nowrap; 
}

儿童CSS：

.divChildClass { 
    width: 110px; 
    height: 200px; 
    display: inline-block; 
}

要水平滚动只：

overflow-x: scroll; 
overflow-y: hidden;

要垂直滚动只：

overflow-x: hidden; 
overflow-y: scroll;

来源

2015-06-18 10:16:11

水平滚动css？

回答

相关问题