0

这是我的代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
#image_container
{
    position:absolute;
    top:100px;
    left:0px;
    height:420px;
}
.folder_image
{
    background:url(folder.png) top no-repeat;
    width:679px;
    height:420px;
    top:0px;
    left:0px;
    position:relative;
    float:left;
    margin-right:50px;  
}
</style>
</head>

<body>
<div id="overflow_container">
    <div id="image_container">
        <div class="folder_image"></div>
        <div class="folder_image"></div>
    </div>
</div>
</body>
</html>

这就是我想要实现的目标：当我添加新divs的类folder_image时，div 应该水平相邻放置。我知道这可以通过设置父容器的宽度来完成，#image_container在我的情况下，但是我如何在不设置widthof 的情况下做到这一点#image_container

提前致谢。

4

3 回答 3

1

尝试这个

.folder_image
{
    background:url(folder.png) top no-repeat #030;
/*    width:679px;*/
    height:420px;
/*  top:0px;
    left:0px;
    position:relative;
    float:left;*/
    margin-right:50px;  
    display:inline-block;
}

jsFiddle 文件

于 2013-06-13T06:57:03.783 回答
1

用于float:left;_.folder_image

演示http://jsfiddle.net/yyene/YnUGb/1/

.folder_image
{
    background:url(folder.png) top no-repeat;
    width:200px;
    height:200px;
    float:left;
    margin:20px;  
}
于 2013-06-13T06:59:51.357 回答
1

我的解决方案：

#image_container
{
    position:absolute;
    top:100px;
    left:0px;
    height:420px;
    overflow-x: scroll;
    overflow-y: none;
    white-space:nowrap;
}
.folder_image
{
    background:red;
    width:679px;
    height:420px;
    display: inline-block;
    margin-right:50px;  
}

小提琴：http: //jsfiddle.net/eKW46/

这篇文章帮助了我：CSS 水平滚动

于 2013-06-13T07:03:44.560 回答