Question

我找到了一个网页，它只显示网格中的3个事件，当屏幕重新调整大小不是某个宽度时，它不仅会将3个事件重新定位到列表中，还会更改每个事件内的布局。

我尝试了很多方法让它看起来像那个网页，但没有运气。

这就是我所做的：CodePen

/* -- DEFAULTS -- */
div, ul, li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

/* -- FLUID GRID STYLES -- */
#Grid {
  margin-bottom: 40px;
  text-align: justify;
  font-size: 0.1px;
}

#Grid li {
  display: inline-block;
  background: #eee;
  width: 23%;
  padding-top: 23%;
  /* Used instead of height to give elements fluid, width-based height */
  margin-bottom: 2.5%;
}

#Grid:after {
  content: 'haha';
  display: inline-block;
  width: 100%;
  border-top: 10px dashed #922d8d;
  /* Border added to make element visible for demonstration purposes */
}

ul li .icon {
  width: 100%;
  display: table;
  min-height: 300px;
  height: 300px;
  padding: 0;
  background: #545454 url(https://www.nike.com/events-registration/client-dist/assets/images/multi-card-bg.png) no-repeat center center;
}

#Grid .placeholder {
  padding: 0;
  border-top: 10px solid #922d8d;
  /* Border added to make element visible for demonstration purposes */
}

/* -- MEDIA QUERIES DEFINING RESPONSIVE LAYOUTS -- */

/* 3 COL */
@media (max-width: 800px) {
  #Grid li {
    width: 31%;
    padding-top: 31%;
    margin-bottom: 3%;
  }
}

/* 2 COL */
@media (max-width: 600px) {
  #Grid li {
    width: 48%;
    padding-top: 48%;
    margin-bottom: 4%;
  }
}

/* SINGLE COL */
@media (max-width: 400px) {
  #Grid li {
    width: 100%;
    padding-top: 100%;
    margin-bottom: 5%;
  }
}

/* -- LEGEND STYLES (NOT PART OF GRID FRAMEWORK) -- */
h1 {
  font: 600 20px"Helvetica Neue";
  text-align: right;
  text-transform: uppercase;
}

label {
  padding: 8px 15px;
  margin-bottom: 20px;
  display: block;
  font: 100 22px"Helvetica Neue";
  border-left: 10px solid #922d8d;
}

label:last-of-type {
  border-left: 10px dotted #922d8d;
}

p {
  font: 200 15px/1.5em"Helvetica Neue";
  max-width: 400px;
  margin-bottom: 30px;
  color: #333;
}

更新

这是我的updated code 问题是我不能放置＆＃34; 1 JAN＆＃34;和＃34;新年＆＃34;在div的中间。

请帮忙。感谢

Answer 1

如果您已经在使用Bootstrap，那么您已具备此功能。使用hidden- ..和col-xx -...类可以使页面响应。

请参阅此示例：http://embed.plnkr.co/IH4WeZ/

使用bootstrap css完成所有操作。诀窍是隐藏某些媒体查询的内容并在适当的时候显示它们。

我只是将它编码为小尺寸和超小尺寸的响应，所以在中型和大型它有点疯狂......但你明白了......

Answer 2

您可以使用Bootstrap网格系统执行此类操作。

您可以使用列和偏移的组合来实现此目的。

<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>

这将跨越页面的整个宽度跨越三列。您可以尝试使用较小宽度的列，并向第一个列添加偏移量以将其从左边缘推开。

http://getbootstrap.com/css/#grid-offsetting

Answer 3

如果您想获得类似的效果，请尝试使用最少的代码复制它并从那里开始工作。

这是一个简单的例子，我已经敲了一下让布局工作： http://codepen.io/anon/pen/OPeXgj

<强> HTML

<ul class="events">
  <li>Event Name</li>
  <li>Event Name</li>
  <li>Event Name</li>
</ul>

<强> CSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.events {
  clear: both;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.events li {
  float: left;
  clear: both;
  width: 100%;
  background: yellow;
  margin: 0;
  padding: 10px;
}

@media only screen and (min-width: 768px) {

  .events li {
    width: 33.3%;
    clear: none;
  }

}

使用移动优先方法，子项目的样式为width: 100%;和clear: both;然后，通过简单的媒体查询，我向左浮动它们并将宽度设置为大约3（33.3％）（可能有更好的方法，但这是一个快速修复）。

如果您使用的是网格系统，可能会更容易。我会调查Bootstrap或Foundation，因为很多这些问题已经解决了很多次。

祝你好运！

Answer 4

最后的解决方案是编写两个版本。一个用于移动设备，另一个用于桌面设备然后使用媒体查询在移动分辨率上隐藏一个，在桌面上隐藏另一个。这将在页面上添加一些额外的负载，但它应该这样做。

如何实现这种布局

4 个答案: