Question

Jsfiddle

我是HTML和CSS的新手，我最薄弱的地方是定位。 1）每张图片都有各自的绿色按钮，但我的问题是如何将这些图片彼此相邻而不是彼此叠加？

2）我如何对其进行编码，以便如果我在图片上方盘旋，相应的按钮仍会改变颜色并允许我点击图片转到链接？

HTML

<!DOCTYPE html>
<div id="chewning">
<img src="http://scontent-b.cdninstagram.com/hphotos-xap1/t51.2885-15/10518156_366963580136787_506416400_a.jpg" </img>

<a href="https://www.youtube.com/user/maxxchewning">
<div id="EFGREEN">

    </div>
    </a>

<div id="CG">
<img src="http://cdn.shopify.com/s/files/1/0232/0959/products/575757_10152033748519359_1620549997_n_2.jpg?v=1398666646"></img>
</div>

<a href="https://www.youtube.com/user/Christianguzmanfitne">
    <div id="CGGreen">
</div></a>
</html>

CSS

#chewning {
            display:inline-block;
            margin-right:1000px;
            margin-top:-40;
        }
        #EFGREEN {
            background-color:green;
            width:306px;
            height:100px;
            display:block;
        }

        #EFGREEN:hover{
            background-color:red;
        }

        a:{
            display:block;
        }
        #CG{
            float:right;
        }
        #CGGreen{
            background-color:green;
            width:414px;
            height:500px;
        }
        #CGGreen:hover{
            background-color:red;
        }

Answer 1

正如一些评论中已经提到的，你的演示的标记和CSS 可以改进，并有大量的在线资源（不会推荐任何特定的）但是，由于您有两个具体问题 - 如何在旁边显示两个图像彼此以及如何以图像链接的方式更改链接，并且当图像悬停时按钮以悬停状态显示（更改背景颜色） - 我也想给出答案因为可能提供一些有关如何改进代码的信息。

在这个经过调整的Fiddle中，我保留了您的CSS，并添加了以下新的CSS：

.button {
  background-color:green;
  width:100%;
  height:100px;
}
.item {
  float:left;
}
.item:hover .button {
  background-color:red;
}

为了显示彼此相邻的两个图像，我已经包裹了两个项目（图像和按钮）在类item的div中。这些项目向左浮动，因此它们会显示出来彼此相邻。我已将课程button添加到两个按钮中，但不是必须根据按钮重复样式＆＃39; IDS。
您已将两个按钮的宽度设置为图像的不同宽度可以通过设置宽度来以更动态的方式处理按钮为100％ - 基于周围item容器的图像宽度将自动具有图像的宽度和具有类button的div 具有相同的宽度（容器的100％）我移动了以前只包裹button div的锚标签来包装每个item中包含的整个div（包含图像和按钮），因此整个内容都是链接的添加.item:hover .button { background-color:red}，将显示按钮悬停物品容器时为红色。

请注意，有不同的方式可以显示彼此相邻的内容 - 只是使用display:inline-block - Fiddle提及其中一个而不是浮点数。如您会注意到，然后按钮彼此相邻显示这取决于所需的布局（也可能取决于个人喜好）哪个可供选择。

如何将div图片放在一起

Jsfiddle

HTML

CSS

1 个答案: