如何让div图片相互对齐答案

【问题标题】：How to put div pictures in line with each other如何让div图片相互对齐
【发布时间】：2015-02-23 11:50:14
【问题描述】：

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;
        }

【问题讨论】：

你的标记没有意义。
由于您是 html 和 css 的新手，使用 Bootstrap 3.0 帮助您了解 css 中的事物应该如何根据您想要做的事情工作并不是一件坏事。 http://getbootstrap.com 玩一会儿就好理解了
您的模型充分说明了从基础开始的重要性。按照此链接了解 HTML 和 CSS 的基础知识。 w3schools.com/html/default.asp
我建议前往CodeAcademy 并从 HTML 和 CSS 标记的基础开始，而不是像你一样毫无准备地钻研。

标签： html css button hyperlink

【解决方案1】：

正如一些 cmets 中已经提到的，您的演示的标记和 CSS 有待改进，网上资源很多（不推荐任何具体的）。
但是由于您有 2 个具体问题 - 如何在旁边显示两个图像彼此以及如何以图像也被链接的方式更改链接，并且当图像悬停时按钮以悬停状态显示（更改背景颜色） - 我只想给出一个答案，也许提供一些有关如何改进代码的信息。

在此调整后的Fiddle 中，我保留但注释掉了您的 CSS，并添加了以下新 CSS：

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

为了让两个图像并排显示，我已经包装了两个项目（图像和按钮）在类 item 的 div 中。这些项目向左浮动，因此它们被显示紧挨着。我在两个按钮上都添加了 button 类，所以它不是有必要根据按钮的 ID 重复样式。
您已将两个按钮的宽度设置为图像的不同宽度只需设置按钮设置为 100% - 基于周围 item 容器的图像宽度将具有图像的宽度，以及具有 button 类的 div 自动具有相同的宽度（容器的 100%）。
我已经移动了以前只包装 button div 的锚标签来包装每个 item 中包含的整个 div（包含图像和按钮），因此整个内容是链接的。
添加.item:hover .button { background-color:red}，将显示按钮悬停在项目容器上时显示为红色。

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

【讨论】：

感谢您花时间指导我！非常详尽的解释。我计划回到 codeacademy 来复习我匆忙完成的事情。再次感谢您的宝贵时间。
@RoseHaggar 很高兴我能为您提供帮助，并且一切顺利。如果这回答了您的问题，您可以考虑接受此答案，以便将问题标记为已关闭/已解决。我注意到您可能是 Stackoverflow 的新手，不知道它是如何工作的以及为什么，请查看meta.stackexchange.com/questions/5234/…