Question

使用此代码：

我试图将绿色方块（当前位于旋转木马下方）插入旋转木马。然而，每当我尝试用方形脚本替换其中一个图像时，旋转木马中的其他项目最终会在下面一行。我认为它与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;
}

Answer 1

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

1）在 background-color之后添加 display：inline-block; ：green;

2）在第一个img标签（80px一个）

之后立即剪切/粘贴div标签

现在，您将在80px占位符图像后面看到80px绿色div。

请注意，这只是一个快速解决方法。我不认为你应该使用这么多的内联CSS，我希望你创建一个格式化你希望插入的DIV的类。祝你好运！

我试图在此轮播中使用方形（div形状）替换图像

1 个答案: