Html 如何让我的div排队？如何将图片和按钮组合在一个链接中？

当我还是一个新手的时候，我就发布了这个问题，但是现在我有了更多的知识，我仍然遇到了问题。以下是JSFIDLE链接：

1） 即使按钮嵌套在标记中，它也不充当链接。 2） 我的物品类别浮动在左边，但它们仍然堆叠在一起

救命啊

HTML

---

首先，始终关闭

标记。将

替换为

。即使标签中没有内容

然后，将宽度33%移动到

.item

类，并将其从

.item img

和

按钮中删除

请看这里的小提琴：

HTML按钮：


和CSS：

.wrap { 
    margin:auto;
    width: 1000px;
}
.item {
    float:left;
    width:33.333%;
}

.item img {
    width: 100%;
    padding-top:10px;
}
.button {
    background-color:green;
    height:50px;
}
.button:hover {
    background-color:red;
}


项目之间的间距
如果您想在项目之间保持良好的间距，可以使用
的边距。项目
元素：

.item {
    float:left;

    width:32%;
    margin-left: 1%;
}

小提琴：

不要忘记每个尺寸都是x3（因为每行有3个项目）

这个32%和1%的特殊组合创建了4个相等的空格（在每个项目之前，在最后一个项目之后）。最后一个空格是因为我们省略了0.33333%，加起来是额外的1%。
链接不起作用和框不浮动的问题是因为您的
div
如下所示：

<div class="button"/>

您还应该将
宽度：33%
添加到
项中，而不是
img，因为它是父项。然后按照您的意愿设置
img
和
a
的宽度（我将其设置为
30%
，带有
边距：0 1%
，以获得一些额外的间距）：

对于按钮，应使用以下标签，而不是
：


在html文件中，可以包含一个小的javascript代码，用于定义函数“SomeAction（）
这将是一条允许您转到所需链接的单行线：

<script>
function SomeAction()
{
open("yourLink");
}
</script>


函数SomeAction（）
{
打开（“你的链接”）；
}

如果您想要一个按钮，那么这将为您提供所需的按钮功能，否则如果您喜欢使用div，也可以。但是请注意开始和结束标记。
您是否尝试在浏览器中打开页面，右键单击，然后选择“检查元素”？这将帮助您理解浮动不起作用的原因。此
无效
div
标记不允许自动关闭…您也可以使用按钮的
标记，而不是使用div，因为
需要alt文本。
<div class="button"/>

<div class="button"></div>

<script>
function SomeAction()
{
open("yourLink");
}
</script>