Question

如果浏览器窗口的比例大于1024，我试图将每行div 3堆叠起来，如果小于1024则显示行中的2个div但是仍然显示所有6个div。目前我有一个问题是迁移我已经发现的东西，因为它不适合div。

这是我之前的例子，它应该如何看，但我没有尝试将其打包成div。

h3 {
     word-break: break-word; /* non standard for webkit */ 
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
}
.img{
 width:640px;
 height:100%;
}
.image { 

   position: relative; 
   width: auto; /* for IE 6 */
   max-height: 640px;
}

h2{
   background-color: rgba(0, 0, 0, 0.5);
   padding-left: 20px;
   padding-right: 20px;
   padding-bottom: 10px;
    padding-top: 10px;
   position: absolute; 
   bottom:-15px;
   left: 0; 
   width: 600px; 
   color:white;
}

<div class="image">
      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />    
      <h2 lang="en">A Movie in the Park: Kung Fu Panda</h2>
</div>
<div class="image">
      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />     
      <h2 lang="en">A Movie in the Park: Kung Fu Panda saasffdafadfadfda</h2>
</div>
<div class="image">
      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />      
      <h2 lang="en">Incomprehensibilities ffafefeafea fefeefes gregrgregregerge</h2>
</div>

这是我尝试用div做的，但它的工作方式不同，所以我无法实现这些属性。

body{
  background-color:darkgrey;
}
.row{
  left: 50%; 
}

@media (min-width: 1024px) { .col-3::after{width:37.5%} }
.col-3 {width: 25%; float: left; border: 1px solid white;
    margin-right: 20px;height:auto;  margin-bottom: 20px;
 
    }
img {
    max-width: 100%;
    max-height: 100%;
}
h2{
   background-color: rgba(0, 0, 0, 0.5);
     word-break: break-word; /* non standard for webkit */ 

  font-size: 2vw;

    max-width: 100%;
    max-height: 100%; 
   color:white;
}

<body>
<div class="row">
<div class="col-3">
       <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />  
      <h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
<div class="col-3">
       <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />  
      <h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
<div class="col-3">
       <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />  
      <h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
<div class="col-3">
       <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />  
      <h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
<div class="col-3">
       <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />  
      <h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
<div class="col-3">
       <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />  
      <h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
</div>
</body>

Answer 1

使用浮动和媒体查询可以实现此结果。我使用flexbox来中心包含所有6个div的包装器，所以尽管div宽度或视口尺寸，所有内容都保持居中。接下来，您可以向左浮动所有内部div，并使用nth-child仅定位您想要clear的那些，这将决定您的列号。使用媒体查询定位宽于1025px的视口，并相应地更改nth-child伪类。

＆＃13;

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
}
html {
  font-family: sans-serif;
}
body {
  display: flex;
  align-items: center;
}
.wrapper {
  overflow: hidden;
  margin: auto;
  padding: 0.75rem;
  background-color: #eee;
}
div > div {
  padding: 0.75rem 1.5rem;
  margin: 0.5rem;
  background-color: #ccc;
  float:left;
}
div:nth-child( 4n ){
  clear: left;
}

.note {
  width: 100%;
  padding: 1rem;
  background-color: #000;
  color: #eee;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
}

@media( max-width: 1025px ){
  div:nth-child( 2n + 3 ){
    clear: left;
  }
  div:nth-child( 4n ){
    clear: none;
  }
  .note {
    background-color: rgba( 0, 0, 0, 0.6 );
  }
}

＆＃13;

<div class="note">Resize viewport to change layout</div>

<div class="wrapper">
  <div>div1</div> <div>div2</div> <div>div3</div>
  <div>div4</div> <div>div5</div> <div>div6</div>
</div>

＆＃13;

中心响应堆栈的divs CSS

1 个答案: