如何显示两个订单项？

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

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

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

我想这样做

Printing-Textile 
Photo-Advertising 
Gastronomy-About US 
Contact

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

我知道这是不好的东西，我们试过，但我做的不知道如何按他们的意愿安排他们。

可能是一些简单但我不知道如何解决它。你能帮我吗？

在此先感谢！

来源

2015-07-10 cristi

套用固定的容器。这将解决它。 –

'宽度：50％;保证金：0; float：left'？并限制父宽度为320例如？ –

将块的宽度设置为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

来源

2015-07-10 14:11:28

添加

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

来源

2015-07-10 14:12:47 user3253002

由于您使用的引导，你可以每两列分成不同的行。下面是一些代码，让你开始

<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，因为它已经在课堂上。

你应该更多的帮助检查出的引导文件： Grid Documentation

来源

2015-07-10 14:16:19 yomamasdad

如何显示两个订单项？

回答

相关问题