您好， flexbox。

Question

我正在尝试重新创建trump.com的目标网页，但却是3x3网格。

当网站被迫响应时，我希望网格的第二个单元格成为第一个单元格。

如何将媒体查询的网格更改为彼此之间的全角矩形，如何将第二个单元格置于其下的第一个单元格的顶部？

这是我到目前为止所做的： https://codepen.io/pisoj1/pen/ZpdRMq

    .grid3x3 {
display: inline-block;
        height:100%;
        width:100%;
      position: relative;
    }
#overlay-content {

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 0;
    background: #000;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
}
.block {
  float: left;  
  top: 0;
  width: 33.3333%;
  height: 33.3333%;  
  position: relative;
display: inline-block;
width: 33.3333%;
height: 33.3333%;
box-sizing: border-box;
padding: 0;
overflow: hidden;
background-color: #090909;
}

谢谢。

Answer 1

您可以考虑使用display：flex for this

＆＃13;

.container {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}
.item {
  width: 30%;
  border: 1px solid black;
  background: green;
  height: 150px;
}

＆＃13;

<div class="container">
  <div class="item">c1</div>

  <div class="item">c2</div>

  <div class="item">c3</div>

  <div class="item">c4</div>

  <div class="item">c5</div>

  <div class="item">c6</div>

  <div class="item">c7</div>
  <div class="item">c8</div>

  <div class="item">c9</div>
</div>

＆＃13;

希望这有帮助

Answer 2

您好， flexbox。

This是我的解决方案，基于Geeky的代码：

<强> HTML

<div class="container">
  <div class="item">c1</div>

  <div class="item">c2</div>

  <div class="item">c3</div>

  <div class="item">c4</div>

  <div class="item">c5</div>

  <div class="item">c6</div>

  <div class="item">c7</div>
  <div class="item">c8</div>

  <div class="item">c9</div>
</div>

CSS （减去美学）

.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  flex-basis:32%;
  flex-grow:1;
  border: 1px solid black;
  height: 150px;
}
@media (max-width:400px) {
  .item {
    flex-basis:100%;
  }
  .item:nth-of-type(2) {
    order:-1;
  }
}

确保您的3个项目的行始终跨越整个宽度，并在宽度低于400px后将第二个项目移动到第一个位置。我希望它适合你。

Answer 3

您可以使用flex和order属性，但如果您需要更好的浏览器支持，请选择以下选项：

* {
  box-sizing: border-box
}

html,body,main{
  margin: 0;
}

main {
  position: relative;
}

div {
  padding: 16px
}

div:nth-of-type(1){background:#000;color:#fff}
div:nth-of-type(2){background:orange}
div:nth-of-type(3){background:mediumseagreen}
div:nth-of-type(4){background:purple}
div:nth-of-type(5){background:deepskyblue}
div:nth-of-type(6){background:lime}
div:nth-of-type(7){background:wheat}
div:nth-of-type(8){background:crimson}
div:nth-of-type(9){background:mediumblue}

@media (min-width: 768px) {
  html,body,main { height: 100%; }
  div {
    position: absolute;
  }
  div:nth-of-type(1),
  div:nth-of-type(2),
  div:nth-of-type(3) {
    top: 0;
    bottom: 66.6666%
  }
  div:nth-of-type(4),
  div:nth-of-type(5),
  div:nth-of-type(6) {
    top: 33.3333%;
    bottom: 33.3333%;
  }
  div:nth-of-type(7),
  div:nth-of-type(8),
  div:nth-of-type(9) {
    top: 66.6666%;
    bottom: 0;
  }
  div:nth-of-type(2),
  div:nth-of-type(4),
  div:nth-of-type(7) {
    left: 0;
    right: 66.6666%
  }
  div:nth-of-type(3),
  div:nth-of-type(6),
  div:nth-of-type(9){
    right: 0;
    left: 66.6666%
  }
  div:nth-of-type(1),
  div:nth-of-type(5),
  div:nth-of-type(8) {
    left: 33.3333%;
    right: 33.3333%;
  }
}

<main>
  <div>1 : Title/logo</div>
  <div>2 Expand to 768px to see grid</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</main>

Codepen

创建一个响应迅速的3x3网格？

3 个答案:

您好， flexbox。