Question

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

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>

我已经尝试嵌套列并且确实具有所需的效果，但我知道不建议使用Skeleton网格系统，因为嵌套列的列宽度为skrunk。

由于

J-P

Answer 1

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

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

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

编辑：

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

Alternate pen here

响应式网格布局

1 个答案: