如何实现此布局

How to implement this layout

本文关键字：布局 实现 何实现      更新时间：2023-09-26

我发现了一个网页，它在一个网格中只显示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;
}

更新

这是我更新的代码。问题是我不能把"1 JAN"answers"NEW YEAR"放在div.的中间

Updat 2

<!DOCTYPE html>
<html>
<head>
  <link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-4 col-xs-12">
          <div class="row hidden-xs icon">
            <div class="title">1 JAN</div>
            <div class="event-time"><i>8:00PM</i></div>
            <div class="sub-title">This Event is Full</div>
          </div>

          <div class="row hidden-xs sub-icon">
            <div><span>LRC Thursday Night Run test long long</span></div>
            <div>
              <input type="button" class="btn btn-primary" value="Register" />  
            </div>
          </div>

          <div class="row hidden-sm event-sm">
            <div class="col-xs-4 event-left">
              <div class="event-day">01</div>
              <div class="event-month">JAN</div>
              <div class="event-time"><i>8:00PM</i></div>
            </div>
            <div class="col-xs-8 event-right">
              <div class="event-notice">This event is full</div>
              <div class="event-title">NIKE RUN 10 KM</div>
              <div class="event-slogan">Come run with us</div>
            </div>
          </div>
      </div>

      <div class="col-sm-4 col-xs-12">
        <div class="well well-sm">
          <h1 class="text-center hidden-xs">14 FEB</h1>
          <p class="text-center hidden-xs">Valentine</p>
          <div class="row hidden-sm">
            <div class="col-xs-4"><i>February 14th</i>
            </div>
            <div class="col-xs-8">Ah! Lovey Dovey Day... Where is my chocolate?</div>
          </div>
        </div>
      </div>

      <div class="col-sm-4 col-xs-12">
        <div class="well well-sm">
          <h1 class="text-center hidden-xs">1 APR</h1>
          <p class="text-center hidden-xs">April Fool</p>
          <div class="row hidden-sm">
            <div class="col-xs-4"><i>April 1st</i>
            </div>
            <div class="col-xs-8">Your car just got stolen.... JUST KIDDING!!!</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

如果您已经在使用Bootstrap，那么您已经拥有了此功能。使用隐藏的。。和col xx-。。。类，使您的页面具有响应性。

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

这一切都是使用bootstrap css完成的。诀窍是在特定的媒体查询中隐藏内容，并在适当的时候显示它们。

我只编码它在小尺寸和超小尺寸时都能响应，所以在中尺寸和大尺寸时它有点疯狂。。。但你明白了。。。

您可以使用Bootstrap网格系统来完成这样的操作。

您可以使用列和偏移量的组合来实现这一点。

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

这将横跨整个页面的三列。您可以尝试使用宽度较小的列，并在第一个列上添加偏移，将其推离左边缘。

http://getbootstrap.com/css/#grid-偏移

如果你想获得类似的效果，试着用最少的代码复制它，然后从那里开始工作。

下面是一个简单的例子，我已经敲起来让布局工作：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;进行样式设置。然后，通过一个简单的媒体查询，我将它们向左浮动，并将宽度设置为大约三分之一（33.3%）（可能有更好的方法，但这是一个快速解决方案）。

如果你使用的是网格系统，它可能会更容易。我会研究Bootstrap或Foundation，因为其中许多问题已经解决了很多次。

祝你好运！

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

相关文章：