调整窗口大小时文本消失

Question

我正在参加一门课程，但我被我的一个家庭作业困住了。 我应该使用媒体查询来使网站具有响应性，并且大多数情况下它都能按预期工作，但是当我达到某个值时，我的文本消失了..它发生在窗口宽度 680px 到 690px 时，我只是不知道为什么。 . 它应该被@media (max-width: 700px) 语句覆盖，不是吗？ 而且我的 css 可以与所有其他窗口宽度一起使用。有什么想法吗？

 /** * GENERAL */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } /* clearfix */ .group:before, .group:after { content: " "; display: table; } .group:after { clear: both; } body { color: #2f2f2f; font: 0.9em/1.35em 'Avant Garde', 'Century Gothic', sans-serif; padding: 1.4em; max-width: 100%; } p { margin: 0; } img { max-width: 100%; height: auto; } .container { max-width: 960px; margin: 0 auto; } article { width: 31.25%; /*width: 300px;*/ float: left; margin: 0 1.04%; /*margin: 0 10px;*/ } .text { text-align: center; } @media (max-width: 1010px) { body { font-size: 0.85em; line-height: 1.28em; padding: 1em; } h3 { font-size: 1.05em; margin: 0.7em; } } @media (max-width: 940px) { body { font-size: 0.75em; line-height: 1.13em; padding: 0.5em; } h3 { margin: 0.25em 0; font-size: 1em; } } @media (max-width: 780px) { article { float: none; width: 100%; height: 200px; overflow: hidden; margin: 0 0 2.55% 0; } .image { display: inline-block; vertical-align: middle; } .text { display: inline-block; max-width: 55%; vertical-align: middle; } } @media (max-width: 700px) { article { position: relative; width: 300px; margin: 10px auto; } .image, .text { display: block; } .text { position: absolute; bottom: 0; left: 0; max-width: none; background: rgba(255, 255, 255, 0.5); color: #444; font-size: 0.75em; z-index: 2; } h3 { color: #323232; } .image { position: absolute; top: 0; left: 0; z-index: 1; } }

 <div class="container group"> <article> <header class="image"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Montauk_Point_Lighthouse.jpg/300px-Montauk_Point_Lighthouse.jpg" width="300" height="200" alt="Fionna"> </header> <div class="text"> <h3>Fionna</h3> <p>An alternate, female version of Finn, Fionna the human is just as brave, adventurous and awesome as her male counterpart as she faces off against her enemy, the Ice Queen.</p> </div> </article> <article> <header class="image"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Montauk_Point_Lighthouse.jpg/300px-Montauk_Point_Lighthouse.jpg" width="300" height="200" alt="Peppermint Butler"> </header> <div class="text"> <h3>Peppermint Butler</h3> <p>Peppermint Butler is an inhabitant of the Candy Kingdom and loyal butler to Princess Bubblegum. He has a mysterious past and an undefined relationship with Death.</p> </div> </article> <article> <header class="image"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Montauk_Point_Lighthouse.jpg/300px-Montauk_Point_Lighthouse.jpg" width="300" height="200" alt="Flame Princess"> </header> <div class="text"> <h3>Flame Princess</h3> <p>Flame Princess is a hot-headed princess from the Fire Kingdom and Finn's new crush. Her flame powers are tied to her emotions, and she's been known to anger quite easily. <p> </div> </article> </div>

Answer 1

当视图宽度小于 780px 时， header.image和div.text都是 inline-block 元素。 所以他们俩都试图共享父article元素的宽度。 但是， div-text的最大宽度为 55%，因此它溢出了它的兄弟和父级，并移动到下一行。 但是现在它在下一行，它被图像容器部分隐藏，但是overflow:hidden在其父级上使其完全隐藏。

如果将div.text的max-width更改为 50%，则在调整大小时不应再出现溢出问题：

 /** * GENERAL */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } /* clearfix */ .group:before, .group:after { content: " "; display: table; } .group:after { clear: both; } body { color: #2f2f2f; font: 0.9em/1.35em 'Avant Garde', 'Century Gothic', sans-serif; padding: 1.4em; max-width: 100%; } p { margin: 0; } img { max-width: 100%; height: auto; } .container { max-width: 960px; margin: 0 auto; } article { width: 31.25%; /*width: 300px;*/ float: left; margin: 0 1.04%; /*margin: 0 10px;*/ } .text { text-align: center; } @media (max-width: 1010px) { body { font-size: 0.85em; line-height: 1.28em; padding: 1em; } h3 { font-size: 1.05em; margin: 0.7em; } } @media (max-width: 940px) { body { font-size: 0.75em; line-height: 1.13em; padding: 0.5em; } h3 { margin: 0.25em 0; font-size: 1em; } } @media (max-width: 780px) { article { float: none; width: 100%; height: 200px; overflow: hidden; margin: 0 0 2.55% 0; } .image { display: inline-block; vertical-align: middle; } .text { display: inline-block; /*max-width: 55%;*/ max-width: 50%; vertical-align: middle; } } @media (max-width: 700px) { article { position: relative; width: 300px; margin: 10px auto; } .image, .text { display: block; } .text { position: absolute; bottom: 0; left: 0; max-width: none; background: rgba(255, 255, 255, 0.5); color: #444; font-size: 0.75em; z-index: 2; } h3 { color: #323232; } .image { position: absolute; top: 0; left: 0; z-index: 1; } }

 <div class="container group"> <article> <header class="image"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Montauk_Point_Lighthouse.jpg/300px-Montauk_Point_Lighthouse.jpg" width="300" height="200" alt="Fionna"> </header> <div class="text"> <h3>Fionna</h3> <p>An alternate, female version of Finn, Fionna the human is just as brave, adventurous and awesome as her male counterpart as she faces off against her enemy, the Ice Queen.</p> </div> </article> <article> <header class="image"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Montauk_Point_Lighthouse.jpg/300px-Montauk_Point_Lighthouse.jpg" width="300" height="200" alt="Peppermint Butler"> </header> <div class="text"> <h3>Peppermint Butler</h3> <p>Peppermint Butler is an inhabitant of the Candy Kingdom and loyal butler to Princess Bubblegum. He has a mysterious past and an undefined relationship with Death.</p> </div> </article> <article> <header class="image"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Montauk_Point_Lighthouse.jpg/300px-Montauk_Point_Lighthouse.jpg" width="300" height="200" alt="Flame Princess"> </header> <div class="text"> <h3>Flame Princess</h3> <p>Flame Princess is a hot-headed princess from the Fire Kingdom and Finn's new crush. Her flame powers are tied to her emotions, and she's been known to anger quite easily. <p> </div> </article> </div>