Сложный адаптивный макет HTML с использованием CSS - PullRequest
Новая
       8

Сложный адаптивный макет HTML с использованием CSS

0 голосов
/ 10 октября 2018

У меня есть требование создать раздел новостей на веб-странице (это 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?

Example of required layout

Спасибо!

Ответы [ 2 ]

0 голосов
/ 10 октября 2018

Вы можете заархивировать нужный макет, используя плавающие 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>
0 голосов
/ 10 октября 2018

Вы можете создать свой собственный столбчатый макет для достижения этой цели: 

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