使用 CSS 的复杂响应式 HTML 布局

Question

我需要在网页上创建一个新闻部分（它是 SharePoint，但这可能不是很相关），看起来类似于下图。

我的问题是 HTML 将从新闻项目列表中动态生成，因此每个项目的代码都是相同的 - 即。我不认为我可以添加代码来区分左侧列项目和右侧列项目。

代码的格式是handlebars.js，但是那里缺乏逻辑似乎阻止我在那里做？

所以在把手中使用一个简单的{{#each items}}，我最终得到这样的结果：

<div class="newsContainer">
  <div class="newsItem">
    <a href="link1"><img src="image1"/></a>
    <div class="newsTitle"><a href="link1">Headline 1</a></div>
    <div class="newsSummary">Summary 1</div>
  </div>
  <div class="newsItem">
    <a href="link2"><img src="image2"/></a>
    <div class="newsTitle"><a href="link2">Headline 2</a></div>
    <div class="newsSummary">Summary 2</div>
  </div>
  <div class="newsItem">
    <a href="link3"><img src="image3"/></a>
    <div class="newsTitle"><a href="link3">Headline 3</a></div>
    <div class="newsSummary">Summary 3</div>
  </div>
  <div class="newsItem">
    <a href="link4"><img src="image4"/></a>
    <div class="newsTitle"><a href="link4">Headline 4</a></div>
    <div class="newsSummary">Summary 4</div>
  </div>
</div>

所以我的挑战是使用 CSS 或 CSS 和 JavaScript.

从上面的代码创建下面的布局

我在“:first-of-type”方面取得的进展有限，但我想知道像 FlexBox 这样的东西是否是另一种选择？

谢谢！

Answer 1

您可以创建自己的柱状布局来实现此目的：

.newsContainer {
  width: 100%;
}

.col {
  position: relative;
  float: left;
  width: 50%;
}

<div class="newsContainer">
  <div class="col">
    <div class="newsItem">
      <a href="link1"><img src="image1" /></a>
      <div class="newsTitle"><a href="link1">Headline 1</a></div>
      <div class="newsSummary">Summary 1</div>
    </div>
  </div><!--End Col 1-->

  <div class="col">
    <div class="newsItem">
      <a href="link2"><img src="image2" /></a>
      <div class="newsTitle"><a href="link2">Headline 2</a></div>
      <div class="newsSummary">Summary 2</div>
    </div>
    <div class="newsItem">
      <a href="link3"><img src="image3" /></a>
      <div class="newsTitle"><a href="link3">Headline 3</a></div>
      <div class="newsSummary">Summary 3</div>
    </div>
    <div class="newsItem">
      <a href="link4"><img src="image4" /></a>
      <div class="newsTitle"><a href="link4">Headline 4</a></div>
      <div class="newsSummary">Summary 4</div>
    </div>

  </div><!--End Col 2-->
</div>

Answer 2

您可以使用浮动 div 来实现所需的布局。我给你写了一个小例子。

我没有编辑您提供的任何 HTML。因此，您可以从下方复制并粘贴 CSS。

请参阅下面的代码段。

* {
  box-sizing: border-box;
}

/**
 This is a clearfix. Floated divs have to be cleared, else the layout will mess up
*/
.newsContainer::before,
.newsContainer::after,
.newsContainer .newsItem::before,
.newsContainer .newsItem::after {
  display: table;
  content: " ";
  clear: both;
}

.newsContainer .newsItem {
  float: left;
}

.newsContainer .newsItem:first-child {
  width: 50%;
}

/** 
  Margin-left 5% acts as spacing
  Put all divs near the first child, except :first-child using CSS :not() selector
*/
.newsContainer .newsItem:not(:first-child) {
  width: 45%;
  margin-left: 5%;
}

/** 
  Overwrite above CSS, now set float right on the 4th and 5th divs. You can add
  more divs `.newsItem:nth-child(6) ... etc` if more divs are present.
  Set margin left value same as .newsContainer .newsItem:first-child width
*/
.newsContainer .newsItem:nth-child(5) {
  float: right;
  margin-left: 50%;
}

/**
 This is just for responive images
*/
.newsContainer .newsItem img {
  max-width: 100%;
  max-height: 100%;
}

.newsContainer .newsItem .newsTitle > a,
.newsContainer .newsItem .newsSummary {
  color: #969696;
}

.newsContainer .newsItem .newsTitle > a {
  font-size: 28px;
  text-decoration: none;
}

.newsContainer .newsItem .newsSummary {
  font-size: 16px;
}

.newsContainer .newsItem > div {
  padding: 0 15px 15px;
}

.newsContainer .newsItem:not(:first-child) > * {
  float: left;
  width: 50%;
}

<div class="newsContainer">
  <div class="newsItem">
    <a href="link1"><img src="https://via.placeholder.com/600x500"/></a>
    <div class="newsTitle"><a href="link1">Headline 1</a></div>
    <div class="newsSummary">Summary 1</div>
  </div>
  <div class="newsItem">
    <a href="link2"><img src="https://via.placeholder.com/200x200"/></a>
    <div class="newsTitle"><a href="link2">Headline 2</a></div>
    <div class="newsSummary">Summary 2</div>
  </div>
  <div class="newsItem">
    <a href="link3"><img src="https://via.placeholder.com/200x200"/></a>
    <div class="newsTitle"><a href="link3">Headline 3</a></div>
    <div class="newsSummary">Summary 3</div>
  </div>
  <div class="newsItem">
    <a href="link4"><img src="https://via.placeholder.com/200x200"/></a>
    <div class="newsTitle"><a href="link4">Headline 4</a></div>
    <div class="newsSummary">Summary 4</div>
  </div>
  <div class="newsItem">
    <a href="link4"><img src="https://via.placeholder.com/200x200"/></a>
    <div class="newsTitle"><a href="link4">Headline 5</a></div>
    <div class="newsSummary">Summary 5</div>
  </div>
</div>

使用 CSS 的复杂响应式 HTML 布局

Complex responsive HTML layout using CSS

html

javascript

css

flexbox

handlebars.js