如何在整个显示宽度内平均分隔Squarespace中的三个代码块？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在整个显示宽度内平均分隔Squarespace中的三个代码块？相关的知识，希望对你有一定的参考价值。
使用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屏幕）并且它们从左到右顺序偏移（它们不是居中）。
首先，您可以使用“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">你可以很容易地实现这一点，使用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>以上是关于如何在整个显示宽度内平均分隔Squarespace中的三个代码块？的主要内容，如果未能解决你的问题，请参考以下文章