英文:
HTML/CSS acts differently if I move the div into it's own line in the code
问题
I understand that you don't want code translation, so I'll provide a summary of the issue you're facing.
The issue you're describing is related to the placement of the <div class="im-content"> element within the HTML structure. You have two blocks of HTML and CSS code, and in the first block, the im-content div is on the same line as the im-container im-image-holder div, while in the second block, it's indented. The difference in indentation shouldn't affect the behavior, but it appears to be causing the image not to resize correctly in the second block.
Without the actual code and complete context, it's challenging to provide a precise solution. However, code formatting and indentation usually do not affect the functionality of HTML/CSS.
To resolve the issue, check for any other changes or CSS rules that might be affecting the layout, and ensure that the CSS and HTML are properly structured. It's possible that some other part of your code or external factors might be causing the behavior difference between the two blocks.
英文:
I have the following HTML/CSS structure:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.im-wrapper {
width: 100%;
height: 100%;
position: fixed;
overflow: hidden auto;
top: 0;
left: 0;
}
.im-backdrop {
background-color: var(--darkblack);
opacity: 80%;
width: 100%;
height: 100%;
overflow: hidden;
position: fixed;
outline: 0;
}
.im-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 0 8px;
box-sizing: border-box;
text-align: center;
}
.im-container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.im-wrapper .im-content {
opacity: 100%;
box-shadow: 0 0 8px rgb(0 0 0 / 80%);
min-width: 50%;
margin-right: 40px;
margin-left: 40px;
}
.im-image-holder .im-content {
max-width: 100%;
}
.im-content {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
text-align: left;
max-width: 100%;
}
.im-figure {
background: var(--black);
line-height: 0;
cursor: pointer;
}
.im-close {
color: white;
cursor: pointer;
padding-right: 45px;
right: 0;
top: 0;
height: 45px;
width: 45px;
line-height: 45px;
position: absolute;
text-decoration: none;
opacity: 65%;
font-size: 28px;
font-weight: bold;
}
button.im-close {
overflow: visible;
background: 0 0;
border: 0;
display: block;
outline: 0;
padding: 0;
box-shadow: none;
}
.im-wrapper .im-content .im-figure .im-img {
padding: 0;
}
img.im-img {
width: auto;
max-width: 80%;
height: auto;
display: block;
line-height: 0;
box-sizing: border-box;
padding: 40px 0;
margin: 0 auto;
}
.im-bottom-bar {
max-height: 20%;
background-color: var(--cyan);
top: 100%;
left: 0;
width: 100%;
cursor: auto;
padding: 0 15px;
}
.im-title {
text-align: left;
line-height: 18px;
word-wrap: break-word;
color: var(--black);
}
.im-collapsed {
padding: 0 15px;
}
.im-left-bar {
font-size: 0.8em;
}
.im-bottom-bar h2 {
border-bottom: 1px solid var(--black);
font-size: 1rem;
padding-bottom: 2px;
}
.im-bottom-bar .im-left-bar.im-collapsed .row>div {
border-right: 1px solid var(--black);
}
.im-bottom-bar .im-left-bar.im-collapsed .row>div:last-of-type {
border-right: none;
}
.im-bottom-bar .im-left-bar {
padding: 10px;
}
.im-counter {
position: absolute;
top: 0;
right: 0;
color: #ccc;
font-size: 12px;
line-height: 18px;
}
<!-- language: lang-html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="im-wrapper">
<div class="im-container im-image-holder"><div class="im-content">
<div class="im-figure">
<button title="Close" type="button" class="im-close">×</button>
<figure>
<img class="im-img" src="https://media.istockphoto.com/id/185235465/photo/white-toast.jpg?s=1024x1024&w=is&k=20&c=3UrLtuMZhHW6AfLbpM-87W0pW2oQHKe7End6hfgG0g0=" style="max-height:1010px">
</figure>
<figcaption>
<div class="im-bottom-bar">
<div class="im-title">
<div class="row">
<div class="col-12 im-collapsed im-left-bar">
<div class="row">
<div class="col-lg-6 text-left">
<h2>Credits</h2>
<div class="mb-1">stuff by waa</div>
</div>
<div class="col-lg-6 text-left">
<h2>Characters</h2>
<div class="mb-1">:3</div>
</div>
</div>
</div>
</div>
</div>
<div class="im-counter"></div>
</div>
</figcaption>
</div>
</div>
</div>
</div>
<!-- end snippet -->
As you can see, the image content resizes along with the window. However, before I had the exact same code, but with the <div class="im-content"> not in the same line as <div class="im-container im-image-holder">. If I do this, the image doesn't properly resize anymore and jumps down.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.im-wrapper {
width: 100%;
height: 100%;
position: fixed;
overflow: hidden auto;
top: 0;
left: 0;
}
.im-backdrop {
background-color: var(--darkblack);
opacity: 80%;
width: 100%;
height: 100%;
overflow: hidden;
position: fixed;
outline: 0;
}
.im-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 0 8px;
box-sizing: border-box;
text-align: center;
}
.im-container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.im-wrapper .im-content {
opacity: 100%;
box-shadow: 0 0 8px rgb(0 0 0 / 80%);
min-width: 50%;
margin-right: 40px;
margin-left: 40px;
}
.im-image-holder .im-content {
max-width: 100%;
}
.im-content {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
text-align: left;
max-width: 100%;
}
.im-figure {
background: var(--black);
line-height: 0;
cursor: pointer;
}
.im-close {
color: white;
cursor: pointer;
padding-right: 45px;
right: 0;
top: 0;
height: 45px;
width: 45px;
line-height: 45px;
position: absolute;
text-decoration: none;
opacity: 65%;
font-size: 28px;
font-weight: bold;
}
button.im-close {
overflow: visible;
background: 0 0;
border: 0;
display: block;
outline: 0;
padding: 0;
box-shadow: none;
}
.im-wrapper .im-content .im-figure .im-img {
padding: 0;
}
img.im-img {
width: auto;
max-width: 80%;
height: auto;
display: block;
line-height: 0;
box-sizing: border-box;
padding: 40px 0;
margin: 0 auto;
}
.im-bottom-bar {
max-height: 20%;
background-color: var(--cyan);
top: 100%;
left: 0;
width: 100%;
cursor: auto;
padding: 0 15px;
}
.im-title {
text-align: left;
line-height: 18px;
word-wrap: break-word;
color: var(--black);
}
.im-collapsed {
padding: 0 15px;
}
.im-left-bar {
font-size: 0.8em;
}
.im-bottom-bar h2 {
border-bottom: 1px solid var(--black);
font-size: 1rem;
padding-bottom: 2px;
}
.im-bottom-bar .im-left-bar.im-collapsed .row>div {
border-right: 1px solid var(--black);
}
.im-bottom-bar .im-left-bar.im-collapsed .row>div:last-of-type {
border-right: none;
}
.im-bottom-bar .im-left-bar {
padding: 10px;
}
.im-counter {
position: absolute;
top: 0;
right: 0;
color: #ccc;
font-size: 12px;
line-height: 18px;
}
<!-- language: lang-html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="im-wrapper">
<div class="im-container im-image-holder">
<div class="im-content">
<div class="im-figure">
<button title="Close" type="button" class="im-close">×</button>
<figure>
<img class="im-img" src="https://media.istockphoto.com/id/185235465/photo/white-toast.jpg?s=1024x1024&w=is&k=20&c=3UrLtuMZhHW6AfLbpM-87W0pW2oQHKe7End6hfgG0g0=" style="max-height:1010px">
</figure>
<figcaption>
<div class="im-bottom-bar">
<div class="im-title">
<div class="row">
<div class="col-12 im-collapsed im-left-bar">
<div class="row">
<div class="col-lg-6 text-left">
<h2>Credits</h2>
<div class="mb-1">stuff by waa</div>
</div>
<div class="col-lg-6 text-left">
<h2>Characters</h2>
<div class="mb-1">:3</div>
</div>
</div>
</div>
</div>
</div>
<div class="im-counter"></div>
</div>
</figcaption>
</div>
</div>
</div>
</div>
<!-- end snippet -->
I made no other changes. I'm very confused by this behavior, as I believed that the formatting of which I write my code has no effect on the behavior, as long as I close the tags properly and such. Can anyone explain why this happens?
答案1
得分: 2
伪元素引发布局问题。
（我已经按照楼主的邀请将我之前的评论转化为答案。）
问题是由这个使用伪元素 before 的 CSS 规则引起的：
.im-container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
伪元素破坏了容器内的内容 div 的布局。问题并不明显，因为伪元素是不可见的。它有高度，但没有宽度。它对布局的影响受到视口大小和 div 之间的空白的影响。
<div class="im-wrapper">
<div class="im-container im-image-holder">
<div class="im-content">
未显示的内容
</div>
</div>
</div>
最简单的解决方案是移除伪元素（通过 CSS），因为它似乎没有用于任何事情。或者，也可以只是移除 inline-block 属性，以给元素一些宽度。
英文:
pseudo-element causes layout problems
(I've converted my earlier comment to an answer at OP's invitation.)
The problem is caused by this css rule that uses the pseudo-element before
.im-container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
The pseudo-element breaks the layout of the content div within the container. The problem is not obvious because the pseudo-element is invisible. It has a height, but no width. And how it affects the layout is influenced by the viewport size and whitespace between divs.
<div class="im-wrapper">
<div class="im-container im-image-holder">
<div class="im-content">
content not shown
</div>
</div>
</div>
The easiest solution is to remove the pseudo-element (via css) since it doesn't appear to be used for anything. Alternatively, one could also just remove the inline-block attribute to give the element some width.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论