如何顯示兩個訂單項？

在底部，你會發現其中有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

如何顯示兩個訂單項？

回答

相關問題