gpt4 book ai didi

html - 我正在尝试在此轮播中用正方形(div 形状)替换图像

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

使用这段代码:

http://jsfiddle.net/YbrX3/1022/

我正在尝试将绿色方 block (目前位于轮播下方)插入轮播。然而,每当我尝试用正方形的脚本替换其中一个图像时,轮播中的其他元素都在下面的一行中结束。我相信它与 CSS 脚本的 .imageDiv img { 部分有关,但我不确定如何修改它。任何帮助将非常感激。谢谢!

HTML:

<body bgcolor="#E6E6FA">

<div id="alternatewrapper" class="wrapper">
<div class="scrolls">
<img style="width:80px;" src="http://placehold.it/50x50" />
<img src="http://placehold.it/50x50" />
<img src="http://placehold.it/50x50" />
<img src="http://placehold.it/50x50" />
<img src="http://placehold.it/50x50" />
<img src="http://placehold.it/50x50" />
<img src="http://placehold.it/50x50" />
<img src="http://placehold.it/50x50" />
<img src="http://placehold.it/50x50" />
<img src="http://placehold.it/50x50" />
<img src="http://placehold.it/50x50" />
<img src="http://placehold.it/50x50" />
<img src="http://placehold.it/50x50" />
<img src="http://placehold.it/50x50" />
<img src="http://placehold.it/50x50" />
<img src="http://placehold.it/50x50" />
<img src="http://placehold.it/50x50" />
<img src="http://placehold.it/50x50" />
<img src="http://placehold.it/50x50" />
<img src="http://placehold.it/50x50" />

<div id="div1" style="width:80px;height:80px;background-color:green;"></div>

CSS:

.wrapper { 
background:transparent;
margin: auto;
text-align: center;
position: relative;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom: 20px !important;
width: 400px;
padding-top: 25px;
}
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
height: 100px;
white-space:nowrap
}
.imageDiv img {
box-shadow: 1px 1px 10px #999;
margin: 2px;
max-height: 200px;
cursor: pointer;
display:inline-block;
*display:inline;
*zoom:1;
vertical-align:top;
}

最佳答案

CSS 的“.imageDiv img”部分与它无关。获取您要插入的 div 并执行以下操作:

1) 在 background-color:green; 之后添加 display:inline-block;

2) 在第一个 img 标签(80 像素)之后剪切/粘贴 div 标签

您现在将在 80 像素的占位符图像之后看到 80 像素的绿色 div。

请注意,这只是一个快速修复。我认为您不应该使用太多内联 CSS,我希望您创建一个类来格式化您希望插入的 DIV。祝你好运!

关于html - 我正在尝试在此轮播中用正方形(div 形状)替换图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30226725/

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