响应式网格布局

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,name="分享这个"} {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>

我已经尝试嵌套列并且确实达到了预期的效果，但我知道不建议使用骨架网格系统，因为嵌套列的列宽是 skrunk。

谢谢

J-P

Answer 1

将文章图片、文章详细信息和左面板嵌套在单个 div 中可能是最简单和最好的方法，因为它会更容易做出响应 - 您只需为它们分配一些额外的类，以便宽度正确显示。

如果您真的不想嵌套东西，那么您可以重新排列侧边栏，使其位于 relative 定位的容器内，与文章内容一起...然后将其设置为 position: absolute; right: 0; 我已经嘲笑sample pen here 并在您提供的 URL 中对其进行了测试。

它有效，我希望它有所帮助，但我仍然认为嵌套是最好的方法！

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>

编辑：

带有嵌套列的新笔 - 仅供参考，这与引导列结构非常相似......而不是重新创建事物，而是使用已经存在的东西来做你需要的事情！ Bootstrap nesting columns

Alternate pen here