将镶嵌布局的宽度更改为50％/ 50％

Question

我希望此布局中的图像各自占据页面的50％。 现在，大图像的分割率为2/3，小图像的分割为1/3。

图片在这里：

https://www.joshungerdesign.com/packed

我可以使用以下方法使大图像占据50％：

.tweak-index-gallery-layout-packed [data-index-gallery-images='3'] 
.Index-gallery-item:nth-child(3n+1) {
width: 50%;}

更改大图像宽度后，我不知道如何使小图像延伸到右侧。

Answer 1

我只是编写基本代码，希望对您有所帮助。谢谢

body {
  margin: 0;
}

.Index-gallery-inner {
  background-color: #fff;      
  display: inline-block;
  width: 100%;
}

.Index-gallery-item {
  box-sizing: border-box;
  float: left;
  height: 500px;
  border: 5px solid #fff;
  width: 50%;
}

.Index-gallery-item:nth-child(2),
.Index-gallery-item:nth-child(3){
  height: 250px;
  width: 50%;
}

.Index-gallery-item-inner {
  background-color: #ccc;
  height: 100%;
  width: 100%;
}

.Index-gallery-item-image {
  background-color: white !important;
  padding: 0 !important;
}

<div class="Index-gallery-inner clear">
  <div class="Index-gallery-item">
    <div class="Index-gallery-item-inner"></div>
  </div>    
  <div class="Index-gallery-item">
    <div class="Index-gallery-item-inner"></div>
  </div>
  <div class="Index-gallery-item">
    <div class="Index-gallery-item-inner"></div>
  </div>
</div>