响应式网格布局

Posted 2023-02-16

【中文标题】响应式网格布局

【英文标题】：Responsive grid layout

【发布时间】：2015-08-05 08:50:59

【问题描述】：

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

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

【参考方案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

【讨论】：

好的，我会回去尝试再次嵌套它，因为基本目标是使其易于响应。但也喜欢另一种选择。

关于在额外的类中设置宽度我会怎么做？我首先以像素为单位设置宽度，但后来意识到我必须编写媒体查询才能将其重置。

我看到您已经更新了您的网址...看起来不错！为了嵌套左侧面板和细节 - 您需要使用 .row 类将它们包装在一个 div 中。然后，您需要更改左侧面板和详细信息类，使其等于 12... 现在它们设置为 two 和 six - 更改它。

我在答案中添加了另一支笔！