javascript - 如何将 Squarespace 中的三个代码块均匀分布在整个显示宽度上?
问题描述
使用 Squarespace,我想了解如何使用 CSS 在整个屏幕宽度上分布三个代码块,并使 CSS 动态以适应不同的屏幕尺寸。
摘要:我在 Squarespace 的一个页面上有三个代码块。每个代码块的每个代码块都被命名为“codeblock1”、“codeblock2”和“codeblock3”(我还标识了块 ID,例如#block-be6b8b856f896c0d000)。每个代码块导致显示一张照片。我想利用整个屏幕宽度,并希望代码块均匀地跨越整个屏幕宽度,并具有这种动态以适应不同的屏幕尺寸。
我想了解如何使用 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">
推荐阅读
- angular - 无法在文档覆盖范围中排除目录 [compodoc]
- reactjs - 如何在一个类中定义多个方法以从组件中调用它们
- jquery - 如何在不触发 CORS 的情况下使用 Ajax 将表单从子域发布到主域?
- javascript - 为什么我输入的 ARN 未开始执行我的 aws step 函数?
- javascript - 点亮元素可以跟踪其范围之外的变量吗
- android - 如何在 android 中获取“购买状态”,特别是从 google play 商店购买应用程序产品?
- parsing - 需要本地 SDK 工具来解析带有大表的原生 pdf 文件
- linkedin-api - LinkedIn Share API - 创建附有 PDF 的帖子
- java - Eclipse 无法导入 import com.google.maps.*(适用于 java Fx 程序)
- javascript - 打破承诺链