如何减小顶部和底部的外边距?

huangapple go评论71阅读模式
英文:

How can I decrease both top and bottom outer spacing?

问题

我正在进行一个项目,我正在使用z-indexposition: relative来将两个<div>元素叠放在一起。然而,我不能同时使用topbottom来调整它们之间的外部间距。

有没有一种方法可以减小周围元素之间的距离,而不改变它们的间距?

.contactDetail {
  position: relative;
  top: 515px;
}

.picture img {
  position: relative;
  z-index: 2;
  bottom: 150px;
}

图像应该位于页面的底部,并位于detail.text的下方。通过将top: 515px应用于.contactDetail,它与上面的元素之间的外部间距太大。我也不想触及其他元素,因为它们在多个其他位置都有使用。

英文:

I am working on a project and I am using z-index and position: relative to position 2 divs on top of each other. However I cannot use both top and bottom to make the proper outer spacing.
Is there some way to decrease the distance between the surounding elements without changing their spacing?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.contactDetail {
  position: relative;
  top: 515px;
}

.picture {
  img {
    position: relative;
    z-index: 2;
    bottom: 150px;
  }
}

<!-- language: lang-html -->

&lt;div class=&quot;container&quot;&gt;
  &lt;header class=&quot;row align-items-center&quot;&gt;
    {% for detail in row.children.all() %}
    &lt;div class=&quot;detailBox col-4 col-md-4 col-sm-12 col-xs-12 d-flex justify-content-center&quot;&gt;
      &lt;div class=&quot;box&quot;&gt;
        &lt;p&gt;{{ detail.text }}&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    {% endfor %}
  &lt;/header&gt;
&lt;/div&gt;
&lt;div class=&quot;picture&quot;&gt;
  &lt;img src=&quot;{{ row.image.one().getUrl(&#39;contact_image&#39;) }}&quot;&gt;
&lt;/div&gt;

<!-- end snippet -->

The image is supposed to go to the end of the page and be positioned under detail.text. By giving top: 515px to .contactDetail the outer space between it and the element above is too big. I also do not want to touch the other elements because they are used on multiple other places.

答案1

得分: 1

以下是您提供的代码的中文翻译:

像这样

    <div class="wrapper">
        <div class="container">
          <header class="row align-items-center">
            {% for detail in row.children.all() %}
            <div class="detailBox col-4 col-md-4 col-sm-12 col-xs-12 d-flex justify-content-center">
              <div class="box">
                <p>{{ detail.text }}</p>
              </div>
            </div>
            {% endfor %}
          </header>
        </div>
        <div class="picture">
          <img src="{{ row.image.one().getUrl('contact_image') }}">
        </div>
      </div>

样式

.wrapper {
  position: relative;
}

.contactDetail {
  position: absolute;
  top: 515px;
}

.picture {
  img {
    position: absolute;
    z-index: 2;
    bottom: 150px;
  }
}

请注意,我已经将HTML和CSS代码部分进行了翻译,但没有回答与翻译相关的问题。

英文:

Like this way

&lt;div class=&quot;wrapper&quot;&gt;
    &lt;div class=&quot;container&quot;&gt;
      &lt;header class=&quot;row align-items-center&quot;&gt;
        {% for detail in row.children.all() %}
        &lt;div class=&quot;detailBox col-4 col-md-4 col-sm-12 col-xs-12 d-flex justify-content-center&quot;&gt;
          &lt;div class=&quot;box&quot;&gt;
            &lt;p&gt;{{ detail.text }}&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        {% endfor %}
      &lt;/header&gt;
    &lt;/div&gt;
    &lt;div class=&quot;picture&quot;&gt;
      &lt;img src=&quot;{{ row.image.one().getUrl(&#39;contact_image&#39;) }}&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;

style

.wrapper {
position: relative;
}

.contactDetail {
    position: absoulte;
    top: 515px;
}

.picture {
      img {
        position: absoulte;
        z-index: 2;
        bottom: 150px;
      }
    }

put your style how ever you want

huangapple
  • 本文由 发表于 2023年7月18日 16:27:04
  • 转载请务必保留本文链接:https://go.coder-hub.com/76710838.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定