gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 00:00:08 24 4
gpt4 key购买 nike

这是我的代码

<!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>

这就是我想要实现的目标:当我添加新的 divsfolder_image 时,div 应该水平并排放置。我知道这可以通过设置父容器的宽度来完成,在我的例子中是 #image_container,但是如果不设置 width 我该怎么做#image_container

提前致谢。

最佳答案

我的解决方案:

#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;
}

fiddle :http://jsfiddle.net/eKW46/

这篇文章帮助了我:CSS horizontal scroll

关于html - 水平对齐图像/div,而不设置容器 div 的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17080928/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com