时间戳

首页 > 解决方案 > 在没有浮动的CSS中对齐网格中的多个div

html - 在没有浮动的CSS中对齐网格中的多个div

问题描述

我一直在尝试设计一个由多个 div 组成的网页，其中包含网格（不是 CSS 网格）中的图像，如下所示：

<div class="some classes"> Some Text </div> <br>

<a href="somwhere"> 
  <div class="some classes float-left"> 
     <img src="http://someimage" height="200px" alt="An image"/> <br> 
     <div class="some other classes"> some image text </div>
  </div>
</a>
<a href="somwhere"> 
  <div class="some classes float-left"> 
     <img src="http://someimage" height="200px" alt="An image"/> <br> 
     <div class="some other classes"> some image text </div>
  </div>
</a>
... many times

<footer> some footer </footer>

使用 CSS

.float-left {
  float:left;
}

而其他 CSS 类只是没有任何意义的占位符。

我不知道创建了多少这样的 div，因为它是通过构建工具根据一些可变参数自动完成的。我一直在使用float:left它似乎适合这种情况，但只要我添加一个页脚，它就会嵌入到其他一些类中。我怀疑这是由于使用了浮点数。如果有人可以向我展示使用或不使用 float 甚至其他 CSS 工具的替代方式，那将很有帮助，但我更喜欢非 JS 解决方案和响应式解决方案。

标签： htmlcssalignment

解决方案

在 CSS 中你需要编写

.float-left {
    float: left;
}

代替

.float-left:{
    float: left;
}

您必须删除多余的:.

推荐阅读