Question

这是我的代码

<!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的宽度来完成，但是如何在不设置width的{{1}}的情况下执行此操作

提前致谢。

Answer 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 File

Answer 2

使用float:left;与.folder_image

DEMO http://jsfiddle.net/yeyene/YnUGb/1/

.folder_image
{
    background:url(folder.png) top no-repeat;
    width:200px;
    height:200px;
    float:left;
    margin:20px;  
}

Answer 3

我的解决方案：

#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 horizontal scroll

水平对齐图像/ div，而不设置容器div的宽度

3 个答案: