包含第二列產品全部按順序排列

我有一個產品列表，一旦它們繼續向下並且已經到達側邊欄，它就會從頁面左側開始出現。我需要產品繼續保持他們的權利，因爲他們開始像。包含第二列產品全部按順序排列

我給側邊欄和產品容器COL-1，COL-2級的，每個人都有以下內容：

.col-1 { 
    float: left; 
    width: auto; 
    height: auto; 
    display: block; 
    float: left; 
} 

.col-2 { 
    width: auto; 
    height: auto; 
    display: block; 
    margin-left: 20px; 
}

我已經把明確的：無論是在CSS花車太后。我會使用Twitter的引導要素，最好只鏈接到我的網站在這裏發佈此有關的jsfiddle但作爲即時通訊：

http://jordancharters.co.uk/dev/test1/products.php

*更新 - 我需要保持寬度和高度設置爲auto，我將使用這個類多次在其他頁面上。

來源

2013-10-26 JordanC26

你給我的建議一試？見下面... –

設置margin-left爲.col-2等於.col-1的寬度：

.col-2 { 
    width: auto; 
    height: auto; 
    display: block; 
    margin-left: 220px; 
}

來源

2013-10-26 13:26:05 matewka

是的，如果你知道第一列的寬度，這是最快的修復方法。 –

的問題是，你的左邊列向左浮動;這意味着它的右邊的所有內容都會包裝該列。看看這張圖片。 enter image description here

你可以嘗試定義這些2列一類，例如

.col { 
    display: block; 
    float: left; 
}

然後給的寬度（或最大寬度）每個：

.col-1{ 
    max-width: 300px; 
    // or width: 33%; 
} 
.col-2{ 
    max-width: 660px; 
    //or width: 66%; 
}

我知道你不不想將寬度應用到它，但這是一個正確的方式來獲得你想要的東西，而沒有一些醜陋的黑客。而且它也是一個很好的做法，以獲得某種.container裏面那些列給它clearfix避免0高度問題：

<div class="container"> 
    <div class="col col-1"> 
    Your column 1 
    </div> 

    <div class="col col-2"> 
    Your column 2 
    </div> 

</div> 

.container:before, 
.container:after { 
    content: ""; 
    display: table; 
} 
.container:after { 
    clear: both; 
} 
.container { 
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */ 
}

Clearfix方法，你可以在這裏找到和其他地方： http://css-tricks.com/snippets/css/clear-fix/

來源

2013-10-26 13:30:57

簡單：只需添加overflow: hidden;到.COL-2：

.col-1 { 
    float: left; 
    width: auto; 
    height: auto; 
    display: block; 
    float: left; 
} 

.col-2 { 
    width: auto; 
    height: auto; 
    display: block; 
    margin-left: 20px; 
    overflow: hidden; 
}

來源

2013-10-26 16:15:23

包含第二列產品全部按順序排列

回答

相關問題