响应网格布局

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