響應網格佈局

Question

我想知道，如果有人可以幫助，我試圖以獲取最新的文章面板沿端運行的圖像，並真正地奮鬥，這裏有一個例子頁面

http://www.g7g20.com/articles/winnie-byanyima-the-civil-society-contribution

和代碼如下：

{tag_image} {tag_copyright} {tag_author圖像} {tag_author生物} {tag_author圖像2} {tag_author生物2} {tag_author圖像3} {tag_author生物3} @ {tag_twitter手柄} 網站 發佈
{tag_releasedate} 分享
{ module_contentholder，名字= 「共享此」} {tag_description}

<div class="four columns side-bar"> 
    <div class="ad-rotator-side{tag_disable side bar banner}">{tag_side bar banner code}<br /> 
    </div> 
    <div>{module_contentholder,name="latest list"} 
     <br /> 
     <p>&nbsp;</p> 
    </div> 

    <div> {module_contentholder,name="Subscribe Form article"} 
     <br /> </div> 
     <div> 
     {module_contentholder,name="Latest comment"} 
     </div> 
     </div> 
</div> 

我試過嵌套列，並且確實有所需的效果，但是我知道不推薦使用Skeleton網格系統，因爲列寬是嵌套列的縮寫。

感謝

JP

Answer 1

嵌套的物體圖像，物品的詳細信息，以及一個DIV中左面板可能是爲這個，因爲它會更容易讓事情敏感最簡單，最好的方法 - 你只需要爲它們分配一些額外的類，以便寬度正確顯示。

如果你真的不想窩的東西，然後使其處於一個relative定位的容器內，旁邊的文章內容，你可以重新排列側邊欄...然後將其設置爲position: absolute;right: 0;我都嘲笑一個sample pen here，並測試它在您提供的網址中。

它的作品，我希望它可以幫助，但我仍然認爲嵌套是最好的方式去！

section { 
 
    max-width: 960px; 
 
    margin: auto; 
 
    position: relative; 
 
} 
 
.eight-col { 
 
    width: 66.666%; 
 
    float: left; 
 
    background: aliceblue; 
 
} 
 
.eight-col img{ 
 
    display: block; 
 
    width: 100%; 
 
    margin-bottom: 15px; 
 
} 
 
.four-col { 
 
    width: 33.333%; 
 
    position: absolute; 
 
    background: lightpink; 
 
    right: 0; 
 
    height: 600px; 
 
} 
 
.two-col { 
 
    width: 16.666%; 
 
    float: left; 
 
    clear: both; 
 
} 
 
.two-col img{ 
 
    width: 100%; 
 
} 
 
.six-col { 
 
    float: left; 
 
    width: 50%; 
 
} 
 

 
.clearfix:after { 
 
    visibility: hidden; 
 
    display: block; 
 
    font-size: 0; 
 
    content: " "; 
 
    clear: both; 
 
    height: 0; 
 
}

<section class="clearfix"> 
 
    <article class="eight-col"> 
 
    <img src="http://placehold.it/350x150"> 
 
    </article> 
 
    <div class="two-col"><img src="http://placehold.it/120x120">Author info goes here</div> 
 
    <div class="six-col"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div> 
 
    </article> 
 
    <aside class="four-col"> 
 
    <ul> 
 
    <li>list item</li> 
 
    <li>list item</li> 
 
    <li>list item</li> 
 
    <li>list item</li> 
 
    </ul> 
 
    </aside> 
 
</section>

編輯：

與內容嵌套的cols新畫筆 - 僅供參考，這是非常相似的引導柱結構......而不是重新創建的東西用的是已經在那裏做你需要的東西！ Bootstrap nesting columns

Alternate pen here