align divs on center/left

有人可以幫我用這段代碼嗎？align divs on center/left

HTML：

<div id="container"> 
    <div class="block"> </div> 
    <div class="block"> </div> 
    <div class="block"> </div> 
    <div class="block"> </div> 
</div>

CSS：

#container { 
    margin:auto; 
    text-align:center; 
    padding:10%; 
} 
.block { 
    width:240px; 
    height:300px; 
    background: red; 
    display:inline-block; 
}

jsfiddle

我想它使整個容器中間對齊，但是當有一個在底部額外的塊，它應該走到左邊。那可能嗎？

來源

2013-01-12 hyperexpert

其中一個問題是，您有多個具有相同ID的div！這是無效的，id必須是唯一的;你應該使用類。 – frenchie

感謝您提及關於ID和課程，我很快就發佈了這個問題！ – hyperexpert

請看看這個截圖的解釋！我希望這有助於：http://i.imgur.com/POqgA.jpg – hyperexpert

我解決我自己的問題與@media查詢：

@media screen and (max-width: 840px) { 
.portfolio_container { 
    width:512px; 
    } 
} 

@media screen and (max-width: 580px) { 
.portfolio_container { 
    width:255px; 
    } 
}

我知道媒體查詢不與舊版瀏覽器兼容！但至少它受到所有最新版本的支持！

來源

2013-01-13 00:10:54 hyperexpert

試試這個jQuery插件來幫助你組織DIV。 desGridLayout： http://des.delestesoft.com:8080/?go=8

來源

2013-01-12 02:27:35 toto

當CSS可以完成這項工作時，您不需要插件！ – frenchie

這個插件不僅僅是一個CSS。它的作用是根據用戶的屏幕創建網格並進行組織。用戶調整屏幕大小或自動滾動所有內容的示例。 – toto

是的，我知道，但當你需要的只是簡單的定位時，這不是正確的工具。 – frenchie

我會用float: left塊ID，從CSS中取出容器和使用類而不是ID，因爲ID必須使用一次：

HTML：

<div> 
    <div class="block"> </div> 
    <div class="block"> </div> 
    <div class="block"> </div> 
    <div class="block"> </div> 
</div>

CSS：

.block { 
    width:40%; 
    height:300px; 
    margin: 5%; 
    float: left; 
    background: red; 
    display:block; 
}

來源

2013-01-12 02:34:23

我知道，但問題的HTML有多個ID塊 –

HTML和CSS固定。 –

** + 1 **好答案。但是，請加一個額外的'塊'，因爲OP想看到奇數。乾杯! – arttronics

此作品：

HTML：

#container { 
    margin:auto; 
    text-align:center; 
    width:70px; 
    overflow:hidden;}

CSS：

.block { 
    width:24px; 
    height:30px; 
    float:left; 
    margin:5px 5px; 
    background: red;}

看到這裏的jsfiddle。我改變了尺寸，以便更容易看到，但您可以根據自己的網站重新調整尺寸。基本上，您需要overflow:hidden;並設置容器的寬度，使其僅適合每行2個塊，以便下一個塊位於下方並與左側對齊。另外，請記住，ID必須在您的頁面中唯一;如果你需要多個具有相同定義的元素，那麼你必須使用類。

來源

2013-01-12 02:38:06 frenchie

** + 1 **優秀的答案。 – arttronics

酷;快樂的編碼。 – frenchie

對不起，即時從我的手機發布，我確實看看你的答案！我想每行有兩個以上的塊，它應該是動態的，它應該根據窗口的大小每行添加更多塊！當窗戶很寬時，我需要儘可能多地安裝，並隨着窗戶變小，將它們放到下一排。 – hyperexpert

align divs on center/left

回答

相關問題