个人中心
gpt4 book ai didi

html - 我希望我的水平滚动图像之间的间距完全相同，如何实现？

转载 作者：行者123 更新时间：2023-11-28 00:57:06 24 4
gpt4 key购买 nike

我的 CSS:

#container {
position: center;
margin-top: 80px;
z-index: 950;
{block:IfGridTheme}margin-left: 430px;{/block:IfGridTheme}
{block:IfNotGridTheme}margin-left: 435px;{/block:IfNotGridTheme}
}

.entry {
position: justify;
font-size: 12px;
color: {color:Body Text}; 
font-family: roboto condensed; 
letter-spacing: 1px; 
{block:PermalinkPage}width: 1000px;
margin-top: 15px;{/block:PermalinkPage}
word-wrap: break-word;
margin-top: 45px;
}

#container1 { 
white-space: nowrap; 
border: none; 
width: 100%;
margin-left: auto; 
margin-right: auto;
} 

#container1 > div { 
background: none; 
width: 100%; 
height: 100%; 
display: inline-block;
padding: 1% 5%; 
margin-right: 176px; 
}

.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}

和我的特定类型页面的 HTML:

<div id="container1">
<div>
<div class="picture_holder" style="width: 1080px;">
<div class="picture" style="width: 1080px;"><img alt="LINKTOFIRSTIMAGE" height="575" src="LINKTOFIRSTIMAGE" />
<div class="captioning">
<div class="caption"><em>CAPTION</em></div>
</div>
</div>
</div>
</div>
<div>
<div class="picture_holder" style="width: 1080px;">
<div class="picture" style="width: 1080px;"><img alt="SECONDIMAGELINKANDSOFORTH" height="575" src="SECONDIMAGELINKANDSOFORTH" />
<div class="captioning">
<div class="caption"></div>
</div>
</div>
</div>
</div>
</div>

在给定页面上，有一系列高度、宽度和整体纵横比完全相同的图像，它们之间的间距完全相同(虽然比我想要的宽很多)，如 1 ) 这张图:

enter image description here

...但是在一系列高度相同但宽度变化很大的图像中，间距非常小，就像 2) 中那样。

我个人也不想。我如何更改我的代码，以便对于这两种类型的页面以及我计划创建的更多页面，每个 image 之间的间距在整个板中的像素数量完全相同网站？这些图像周围是否存在假想框导致了问题？

编辑:我还应该声明，我在网站 Tumblr.com 上使用 HTML 功能，因此某些属性，如 flex 似乎永远不可用。

edit2: display: grid; 和类似内容也不可用。如果有帮助，这也位于代码的顶部:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

感谢您提供的信息。

最佳答案

您的 html 结构:

<div id="parent_container">
          <div id="card_1" class="card_properties">
            <h3>Title to image 1</h3>
            <img style="background:red">
            <caption>Card 1 caption</caption>
          </div>
          <div id="card_2" class="card_properties">
              <h3>Title to image 1</h3>
               <img style="background:violet">
            <caption>Card 2 caption</caption>
          </div>
          <div id="card_3" class="card_properties">
              <h3>Title to image 1</h3>
              <img style="background:seagreen">
            <caption>Card 3 caption</caption>
          </div>
          <div id="card_4" class="card_properties">
              <h3>Title to image 1</h3>
            <img style="background:skyblue">
            <caption>Card 4 caption</caption>
          </div>
        </div>

你的 CSS 结构:

  #parent_container <=== setting up flex for container
  {
    display: flex;
    flex-wrap: wrap;  <=== makes sure if the cards are many then they go on next line
    justify-content: space-evenly;  <=== makes sure there is equal space
  }
  .card_properties
  {
    border: 1px solid rgba(0,0,0,0.2);
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    border-radius: 14px;
    width:20vw;
    height:200px;
    padding:1em;
  }

  img  <=== written this additional because I didn't have time to find image
  {
   width: 100%;
   height: 120px;
   border-radius: 14px
  }

Working codepen example

关于html - 我希望我的水平滚动图像之间的间距完全相同，如何实现？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52896510/

24 4 0
文章推荐： javascript - 当页面宽度小于 1350 像素时，防止页面上的内容移动
文章推荐： css - 如何垂直放置字体超棒的箭头图标中心
文章推荐： javascript - append 数据属性时无法识别的表达式
文章推荐： Javascript 如果输出为 0，则不打印
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com