Html 如何使div图片相互对齐

我对HTML和CSS非常陌生，我的弱点是定位。 1） 每张图片都有各自的绿色按钮，但我的问题是如何将这些图片相邻放置，而不是放在彼此的顶部

2） 我该如何编码，以便在我将鼠标悬停在图片上时，相应的按钮仍会向上更改颜色，并允许我单击图片以转到链接

HTML

---

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

在本文中，我保留了但注释掉了您的CSS，并添加了以下新CSS：

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

要将两个图像相邻显示，我已包装了这两个项目（图像和按钮） 在带有类

项的div中

。这些项目向左浮动，因此将显示它们 紧挨着。我在两个按钮中都添加了class

按钮

，因此它不是 需要根据按钮ID重复样式。
您已经将这两个按钮的宽度设置为所显示图像的不同宽度 可以通过更动态的方式处理，只需设置 根据周围

项目
容器的图像宽度，将按钮设置为100%
将具有图像的宽度，并自动使用class
按钮设置div
宽度相同（容器的100%）。

我已经移动了以前仅包装
按钮的锚定标记来包装
每个
项目中包含的整个div（包含图像和按钮）
，因此整个内容都是链接的。

添加
.item:hover.button{background color:red}
，将显示按钮
悬停在项目容器上时显示为红色

请注意，有不同的方法可以将内容相邻显示—仅
其中一个例子是使用
display:inline block
——而不是float。像
您会注意到，然后按钮也会彼此对齐显示。

这取决于所需的布局（也可能取决于个人喜好）
选择哪一个。
您的标记没有意义。因为您对html和css还不熟悉，所以使用Bootstrap 3.0帮助您了解css中的内容应该如何基于您想要做的事情。只需玩一会儿就可以更好地理解它。你的模型充分说明了从基础开始是多么重要。按照此链接学习HTML和CSS的基础知识。我建议你从HTML和CSS标记的基础知识开始，而不是像你一样毫无准备地钻研。谢谢你花时间来指导我！解释得很透彻。我打算回到代码学院，重温一下我匆忙完成的事情。再次感谢您的时间。@Rosehagar很高兴我能帮助您，也非常感谢您的复习。如果这回答了你的问题，你可以考虑接受这个答案，所以这个问题将被标记为关闭/解决。正如我注意到的，您可能是Stackoverflow的新手，不知道这是如何工作的，为什么，请检查一下
#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;
        }

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