英文:
How can I decrease both top and bottom outer spacing?
问题
我正在进行一个项目，我正在使用z-index和position: relative来将两个<div>元素叠放在一起。然而，我不能同时使用top和bottom来调整它们之间的外部间距。
有没有一种方法可以减小周围元素之间的距离，而不改变它们的间距？
.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 -->
<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>
<!-- 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
<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>
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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论