如何在整个显示宽度内平均分隔Squarespace中的三个代码块？

Question

使用Squarespace，我想了解如何使用CSS在整个屏幕宽度上分配三个代码块，并使CSS动态以适应不同的屏幕尺寸。

简介：我在Squarespace的页面上有三个代码块。每个代码块被命名为“codeblock1”，“codeblock2”和“codeblock3”（我还为每个代码块识别了诸如＃block-be6b8b856f896c0d000的块ID）。每个代码块都会显示一张照片。我想利用整个屏幕宽度，并希望代码块同样跨越整个屏幕宽度，并具有动态以适应不同的屏幕尺寸。

我想了解如何使用CSS控制它。例如，我已经能够使用代码将最左边的代码块移动到左侧（将左边距更改为-300对0）：

#block-48747d3bb62b559a0000 {
    margin-left: -300px;
    margin-right: 0px;
    padding-left: 0px;
    padding-right: 0px;
    max-width: 100%;

但是，如果我更改浏览器大小，这不起作用，并且它也不适用于其他两个代码块。也许如果有人可以在SS中具体解释如何做到这一点（特别是解释代码应该去哪里）那将是非常棒的。

**编辑：

感谢您的快速回复！这使用了@Chris的解决方案。我做了以下修改以获得我正在寻找的布局：

.image {
  width: 33vw
  position: absolute;

}

#block-3e9110aac8284e2c1234 {
  left: -15vw;
  width: 130%;

}

#block-48747d3bb62b559a5678 {
  left: -5vw;
  width: 130%  

}

#block-be6b8b856f896c0d9102 {
  left: 5vw;
  width: 130%
}

**请注意：对于那些不知道的人，Squarespace有任何网页正文的固定边距。如果您希望项目跨越整个计算机屏幕，则需要修改CSS以将项目移动到固定边距的左侧或右侧。使用@Chris解决方案，我可以让最左边的div移动到边距左边的唯一方法是使用负vw（-15vw）;一旦我这样做，我不得不进行其他修改以使div在屏幕上均匀分布（中间div为“-5vw”，最右边的div为“5vw”）。这可能也与我正在分配的每个区块的大小有关 - 我最终将它们的大小增加了130％。

我注意到这个解决方案引起了一个新问题：当这个页面在iPhone上呈现时，图像太大（它们没有正确调整大小以适应iPhone屏幕）并且它们从左到右顺序偏移（它们不是居中）。

Answer 1

首先，您可以使用“left”来定位图像，而不是使用“margin-left”。其次，您可以使用“vw”而不是“％”来调整图像的大小，使其始终具有相对于窗口宽度的相同宽度。我试图在下面做一个粗略的版本

    .image {
  width: 33.33vw;
  position: absolute;
}
.image1 {
  left: 0;
}

.image2 {
  left: 33.33vw;
}

.image3 {
  left: 66.66vw;
}

<img src="https://th.thgim.com/opinion/op-ed/article22695424.ece/alternates/FREE_300/9thscience" alt="image" class="image image1">
<img src="https://th.thgim.com/opinion/op-ed/article22695424.ece/alternates/FREE_300/9thscience" alt="image" class="image image2">
<img src="https://th.thgim.com/opinion/op-ed/article22695424.ece/alternates/FREE_300/9thscience" alt="image" class="image image3">

Answer 2

你可以很容易地实现这一点，使用flexbox非常容易使用，目前是很好的supported。

.container {
    display: flex;
}

.imageCont {
    width: 33.33%;
}

.image {
    width: 100%;
}

<div class="container">
    <div class="imageCont">
        <img src="https://th.thgim.com/opinion/op-ed/article22695424.ece/alternates/FREE_300/9thscience" alt="image" class="image">
    </div>

    <div class="imageCont">
        <img src="https://th.thgim.com/opinion/op-ed/article22695424.ece/alternates/FREE_300/9thscience" alt="image" class="image">
    </div>

    <div class="imageCont">
        <img src="https://th.thgim.com/opinion/op-ed/article22695424.ece/alternates/FREE_300/9thscience" alt="image" class="image">
    </div>
</div>