0

我想知道是否有人可以提供帮助，我正在尝试让最新的文章面板与图像一起运行，并且真的很挣扎，这是一个示例页面

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

代码如下：

{tag_image} {tag_copyright} {tag_author image} {tag_author bio} {tag_author image 2} {tag_author bio 2} {tag_author image 3} {tag_author bio 3} @{tag_twitter handle} 网站发布
{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

4

1 回答 1

0

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

如果您真的不想嵌套东西，那么您可以重新排列侧边栏，使其位于relative定位的容器内，与文章内容一起...然后将其设置为position: absolute; right: 0;I have mocked a 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>

编辑：

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

备用笔在这里

于 2015-05-23T13:11:05.057 回答