调整窗口

Question

我正在上一门课，我被困在一个家庭作业中。我应该使用媒体查询来使网站响应，并且大部分它按预期工作，但当我达到某个值时，我的文本消失..它发生在窗口宽度680px到690px，我只是有noooooo的想法，为什么。它应该被@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都是内联块元素。所以他们俩都试图分享父article元素的宽度。 但是，div-text的最大宽度为55％，所以它的兄弟和父母都会溢出，并移动到下一行。但是现在它在下一行，它被图像容器部分隐藏，但其父级的overflow:hidden使其完全隐藏。

如果您将max-width的{​​{1}}更改为50％，则在调整大小时不应再出现任何溢出问题：

＆＃13;

＆＃13;

div.text

＆＃13;

/**
 * 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;
  }
}

＆＃13;

＆＃13;

＆＃13;