gpt4 book ai didi

html - 为什么图像不是一个接一个地出现?

转载 作者:太空宇宙 更新时间:2023-11-03 17:53:19 26 4
gpt4 key购买 nike

我希望在具有 image-wrapper 类的 div 中内联具有类 image-1 的 div。但是我已经尝试了很多,但是带有 image-1 类的 div 没有内联。我可以知道我在哪里做错了吗?

<style>
*{
margin:0;
padding:0;
}
.wrapper{
width:100%;
height:400px;
background-color:#666;
padding:5px;
box-sizing:border-box;
overflow-x:hidden;
}
.image-wrapper{
width:300%;
height:390px;
background-color:#000;
}
.image-1{
width:100%;
height:100%;
background-color:#03F;
float:left;
display:inline-block;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="image-wrapper">
<div class="image-1">
</div>
<div class="image-1">
</div>
<div class="image-1">
</div>
</div>
</div>
</body>

最佳答案

1) 从 image-1 元素中移除 float:left

2) 在image-wrapper上设置white-space:nowrap;

FIDDLE

* {
margin: 0;
padding: 0;
}
.wrapper {
height: 400px;
background-color: #666;
padding: 5px;
box-sizing: border-box;
}
.image-wrapper {
height: 390px;
background-color: #000;
white-space: nowrap;
overflow-y: hidden;
overflow-x: auto;
}
.image-1 {
width: 100%;
height: 100%;
background-color: #03F;
display: inline-block;
}
.image-1 + .image-1 {
background-color: wheat;
}
.image-1 + .image-1 + .image-1 {
background-color: tomato;
}
<div class="wrapper">
<div class="image-wrapper">
<div class="image-1">
</div>
<div class="image-1">
</div>
<div class="image-1">
</div>
</div>
</div>

关于html - 为什么图像不是一个接一个地出现?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26826475/

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