阻止div在每行达到2后移动

Question

我试图阻止div在每行达到2 div后更改其位置，并且窗口太小而无法显示它们。我希望他们保持同样的位置，但我自己也有问题。

这是我得到的代码：

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}

html,
body {
  background-color: darkgrey;
  height: 100%;
  margin: 0;
}

html {
  font-family: sans-serif;
}

body {
  display: flex;
  align-items: center;
}

.wrapper {
  overflow: hidden;
  margin: auto;
}

div>div {
  margin: 0.5rem;
  float: left;
  position: relative;
}

div:nth-child( 4n) {
  clear: left;
}

img {
  width: 320px;
  max-height: 100%;
}

.border {
  border-style: solid;
  border-width: 1px;
  border-color: white;
}

.txt {
  background-color: rgba(0, 0, 0, 0.5);
  left: -8;
  width: 320px;
  position: absolute;
  bottom: -7px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  max-width: 100%;
  color: white;
}

@media( max-width: 1024px) {
  div:nth-child( 2n + 3) {
    clear: left;
  }
  div:nth-child( 4n) {
    clear: none;
  }
}

＆＃13;

<div class="wrapper">
  <div class="border">
    <img src="http://i.imgur.com/VCsr2MH.png">
    <div class="txt">div text 1</div>
  </div>
  <div class="border">
    <img src="http://i.imgur.com/VCsr2MH.png">
    <div class="txt">div text 2</div>
  </div>
  <div class="border">
    <img src="http://i.imgur.com/VCsr2MH.png">
    <div class="txt">Omelette du fromage</div>
  </div>
  <div class="border">
    <img src="http://i.imgur.com/VCsr2MH.png">
    <div class="txt">How you doin?</div>
  </div>
  <div class="border">
    <img src="http://i.imgur.com/VCsr2MH.png">
    <div class="txt">div text 5</div>
  </div>
  <div class="border">
    <img src="http://i.imgur.com/VCsr2MH.png">
    <div class="txt">div text 6</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

标签应与其布局相符，但它们不会按预期进行预览。 以下是其他CSS编辑器的链接，它可以做得更好：http://www.cssdesk.com/7kW7k

Answer 1

使用flexbox重写你的布局，并进行一些样式优化。

假设您想要在行和页面中的2个图像缩小时添加滚动条。结果：

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  background-color: darkgrey;
  height: 100vh;
  margin: 0;
  
  /* for centering block both horizontally and vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  /* maximum 3 items, (320px + 2px border + 0.5rem margin-left + 0.5rem margin-right) × 3 */
  max-width: calc(322px * 3 + 0.5rem * 6);
  /* minimum 2 items, (320px + 2px border + 0.5rem margin-left + 0.5rem margin-right) × 2 */
  min-width: calc(322px * 2 + 0.5rem * 4);
}

.wrapper > div {
  margin: 0.5rem;
}

img {
  width: 320px;
  max-height: 100%;
}

.border {
  border: 1px solid #fff;
  position: relative;
}

.txt {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px 20px;
  color: white;
}

<div class="wrapper">
  <div class="border">
    <img src="http://i.imgur.com/VCsr2MH.png">
    <div class="txt">div text 1</div>
  </div>
  <div class="border">
    <img src="http://i.imgur.com/VCsr2MH.png">
    <div class="txt">div text 2</div>
  </div>
  <div class="border">
    <img src="http://i.imgur.com/VCsr2MH.png">
    <div class="txt">Omelette du fromage</div>
  </div>
  <div class="border">
    <img src="http://i.imgur.com/VCsr2MH.png">
    <div class="txt">How you doin?</div>
  </div>
  <div class="border">
    <img src="http://i.imgur.com/VCsr2MH.png">
    <div class="txt">div text 5</div>
  </div>
  <div class="border">
    <img src="http://i.imgur.com/VCsr2MH.png">
    <div class="txt">div text 6</div>
  </div>
</div>

您可以在jsFiddle中测试调整大小。

如果您希望图像缩小，可以为此添加媒体查询：

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  background-color: darkgrey;
  height: 100vh;
  margin: 0;
  
  /* for centering block both horizontally and vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  /* maximum 3 items, (320px + 2px border + 0.5rem margin-left + 0.5rem margin-right) × 3 */
  max-width: calc(322px * 3 + 0.5rem * 6);
}

.wrapper > div {
  margin: 0.5rem;
}

img {
  width: 320px;
  max-height: 100%;
}

.border {
  border: 1px solid #fff;
  position: relative;
}

.txt {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px 20px;
  color: white;
}

@media (max-width: 750px) {
  .border {
    width: calc(50% - 2rem);
  }
  
  .border > img {
    width: 100%;
  }
}

<div class="wrapper">
  <div class="border">
    <img src="http://i.imgur.com/VCsr2MH.png">
    <div class="txt">div text 1</div>
  </div>
  <div class="border">
    <img src="http://i.imgur.com/VCsr2MH.png">
    <div class="txt">div text 2</div>
  </div>
  <div class="border">
    <img src="http://i.imgur.com/VCsr2MH.png">
    <div class="txt">Omelette du fromage</div>
  </div>
  <div class="border">
    <img src="http://i.imgur.com/VCsr2MH.png">
    <div class="txt">How you doin?</div>
  </div>
  <div class="border">
    <img src="http://i.imgur.com/VCsr2MH.png">
    <div class="txt">div text 5</div>
  </div>
  <div class="border">
    <img src="http://i.imgur.com/VCsr2MH.png">
    <div class="txt">div text 6</div>
  </div>
</div>

在jsFiddle中测试调整大小。

Answer 2

我添加了一个左侧属性，因此设法更好地对齐：

/

小提琴： https://jsfiddle.net/mjpLmqwx/

Answer 3

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}
html,
body {
 background-color: darkgrey;
  height: 100%;
  margin: 0;
}
html {
  font-family: sans-serif;
}
body {
}
.wrapper {
  margin: auto;
  width:100%;

}
.txt {
    background-color: rgba(0, 0, 0, 0.5);
    left: -8;
    width: 320px;
    position: absolute;
    bottom: 0px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    max-width: 100%;
    color: white;
    margin: 0px;
}
div > div {
    margin: 0.5rem;
}




img {
width:100%;
}
.border {
    border-style: solid;
    border-width: 1px;
    border-color: white;
    width: 47%;
    position: relative;
    float: left;
}

＆＃13;

<div class="wrapper">
  <div class="border">
    <img src="http://i.imgur.com/VCsr2MH.png">
    <div class="txt">div text 1</div>
  </div> 
  <div class="border">
    <img src="http://i.imgur.com/VCsr2MH.png">
    <div class="txt">div text 2</div>
  </div> 
  <div class="border">
    <img src="http://i.imgur.com/VCsr2MH.png">
    <div class="txt">Omelette du fromage</div>
  </div> 
  <div class="border">
    <img src="http://i.imgur.com/VCsr2MH.png">
    <div class="txt">How you doin?</div>
  </div> 
  <div class="border">
    <img src="http://i.imgur.com/VCsr2MH.png">
    <div class="txt">div text 5</div>
  </div> 
  <div class="border">
    <img src="http://i.imgur.com/VCsr2MH.png">
    <div class="txt">div text 6</div>
  </div> 
</div>

＆＃13;

＆＃13;

＆＃13;