Question

我有这个网站：

在底部你会发现有7个项目的页脚（印刷，纺织，照片，广告，美食，关于我们，联系）。

目前所有这些元素都符合这种形状

Printing-Textile-Photo-Advertising-Gastronomy-About US-Contact

我想这样做

Printing-Textile
Photo-Advertising
Gastronomy-About US
Contact

CODE HTML

<div class="site-info container">
    <div class="footer-blocks">
          //some code HTML
    </div>
    <div class="footer-blocks">
          //some code HTML
    </div>
    <div class="footer-blocks">
          //some code HTML
    </div>
    <div class="footer-blocks">
         //some code HTML
    </div>
    <div class="footer-blocks">
         //some code HTML
    </div>
    <div class="footer-blocks">
         //some code HTML
    </div>
    <div class="footer-blocks">
         //some code HTML
    </div>
</div>

CODE CSS：

.footer-blocks{
  float:left;
  width:12%;
  color:#fff;
  margin-right:2%;
  text-align:left;
}
.footer-blocks:last-child{
  margin-right:0;
}

我尝试修改CSS代码并从中获取

<div class="site-info container">
        <div class="footer-blocks" style="float:left">
              //some code HTML
        </div>
        <div class="footer-blocks" style="float:left">
              //some code HTML
        </div>
        <div class="footer-blocks" style="float:left">
              //some code HTML
        </div>
        <div class="footer-blocks">
             //some code HTML
        </div>
        <div class="footer-blocks">
             //some code HTML
        </div>
        <div class="footer-blocks">
             //some code HTML
        </div>
        <div class="footer-blocks">
             //some code HTML
        </div>
    </div>

CODE CSS NEW：

.footer-blocks{
  width:12%;
  color:#fff;
  margin-right:2%;
  text-align:left;
}

我知道我们尝试过的并不好，但我不知道如何按照自己的意愿安排它们。

可能简单但我不知道如何修复它。你能帮我吗？

提前致谢！

Answer 1

将块的宽度设置为48％，最小高度将使其在垂直方向上的面积相等。如果需要限制列之间的间距，请为父元素设置固定宽度。

.site-info.container {
  width: 500px; /* Add */
}
.footer-blocks {
  color: #fff;
  float: left;
  margin-right: 2%;
  min-height: 330px; /* Add */
  text-align: left;
  width: 48%; /* Add */
}

<强>输出：

enter image description here

Answer 2

添加

<div style="clear: both;">

每2个街区后

并改变：

.footer-blocks{
  float:left;
  width:12%;
  color:#fff;
  margin-right:2%;
  text-align:left;
}

为：

.footer-blocks{
  float:left;
  width:50%;
  color:#fff;
  text-align:left;
}

Answer 3

由于您正在使用引导程序，因此可以将每两列拆分为不同的行。这里有一些代码可以帮助您入门

<div class="site-info container">
    <div class="row">
        <div class="col-md-6">
            <div class="footer-blocks">
                 -- Printing Stuff
            </div>
        </div>
        <div class="col-md-6">
            <div class="footer-blocks">
                 -- Textile Stuff
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="footer-blocks">
                 -- Photo Stuff
            </div>
        </div>
        <div class="col-md-6">
            <div class="footer-blocks">
                 -- Advertising Stuff
            </div>
        </div>
    </div>
    -- ETC.
</div>

此外，没有必要为你的内联css添加样式float：left，因为它已经在课堂上了。

您应该查看引导文档以获取更多帮助： Grid Documentation

如何在两个中显示订单项？

3 个答案: