我过去几天一直从事一个项目，但我遇到了一个视觉错误，显示我的盒子没有适当的右键。
我曾尝试更改CSS上的Flex，但我没有得到其他好的结果来解决此问题，所以我可以将这个想法删除
* {
margin: 0;
padding: 0;
}
body {
background-color: #003300;
}
.nav {
background-color: #00b300;
margin-bottom: 0%;
}
ul {
margin-left: 75%;
}
li {
padding: 20px;
display: inline-block;
}
a {
text-align: center;
color: white;
list-style: none;
text-decoration: none;
}
li:hover {
-moz-transition-duration: 0.3s;
background-color: #004d00;
}
.post {
padding: 20px;
background-color: white;
margin-right: 5%;
margin-left: 30%;
margin-top: 5%;
border-radius: 15px;
}
h1 {
text-align: center;
}
.form {
background-color: #404040;
margin-left: 1%;
margin-right: 70%;
padding: 20px;
border-radius: 15px;
}
.link {
background-color: #19194d;
margin-left: 15px;
margin-right: 15px;
padding: 10px;
border-radius: 15px;
color: white;
}
.link:hover {
background-color: #0c0c27;
-moz-transition-duration: 0.3s;
}
* {
margin: 0;
padding: 0;
}
body {
background-color: #003300;
}
.nav {
background-color: #00b300;
margin-bottom: 0%;
}
ul {
margin-left: 75%;
}
li {
padding: 20px;
display: inline-block;
}
a {
text-align: center;
color: white;
list-style: none;
text-decoration: none;
}
li:hover {
-moz-transition-duration: 0.3s;
background-color: #004d00;
}
.post {
padding: 20px;
background-color: white;
border-radius: 15px;
}
h1 {
text-align: center;
}
.form {
background-color: #404040;
padding: 20px;
border-radius: 15px;
}
.link {
background-color: #19194d;
margin-left: 15px;
margin-right: 15px;
padding: 10px;
border-radius: 15px;
color: white;
}
.link:hover {
background-color: #0c0c27;
-moz-transition-duration: 0.3s;
}
/* Flex container */
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 20px;
}
/* Make post larger than form */
.post {
flex: 3;
margin-left: -65%;
}
.form {
flex: 1;
}
.tema {
background-color: white;
margin-top: 20px;
margin-left: 2%;
padding: 20px;
border-radius: 15px;
}
.thumbnail {
border: solid;
width: 100%;
height: 100px;
}
.titulo-tema {
text-align: center;
}
.boton-tema {
background-color: #00b300;
text-align: center;
padding: 20px;
margin-left: 150px;
margin-right: 150px;
margin-top: 20px;
border-radius: 15px;
}
.boton-tema:hover {
background-color: #004d00;
-moz-transition-duration: 0.3s;
}
.container-temas {
display: flex;
justify-content: space-between;
padding: 20px;
flex-wrap: wrap;
}
@media screen and (min-width: 480px) {
ul {
margin-left: 0%;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20px;
}
.post {
margin-left: 0%;
margin-bottom: -40%;
margin-right: 0%;
}
.form {
margin-right: 20%;
margin-left: 20%;
}
li {
padding: 70px;
}
h1 {
font-size: 50px;
}
p {
font-size: 40px;
}
.titulo-tema {
font-size: 50px;
}
}
@media screen and (min-width: 767px) {
ul {
margin-left: 35%;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20px;
}
.post {
margin-left: 0%;
margin-bottom: -80%;
margin-right: 0%;
}
.form {
margin-right: 20%;
margin-left: 20%;
}
li {
padding: 70px;
}
h1 {
font-size: 70px;
}
p {
font-size: 40px;
}
.titulo-tema {
font-size: 70px;
}
}
@media screen and (min-width: 1030px) {
ul {
margin-left: 75%;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 20px;
}
.post {
margin-left: -65%;
margin-bottom: 0%;
margin-right: 0%;
}
.form {
margin-right: 70%;
margin-left: 0%;
margin-bottom: 0%;
}
li {
padding: 20px;
}
h1 {
font-size: 30px;
}
p {
font-size: 20px;
}
.titulo-tema {
font-size: 30px;
}
}<html>
<head>
<title>math lizard</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="nav">
<ul>
<a href="">
<li>tema 1</li>
</a>
<a href="">
<li>tema 2</li>
</a>
<a href="">
<li>tema 3</li>
</a>
</ul>
</div>
<div class="container-temas">
<div class="tema">
<img src="" class="thumbnail">
<h2 class="titulo-tema">titulo del subtema</h2>
<hr>
<p class="descripcion-breve">Esta descripcion demuestra que tema se esta explicando</p>
<a href="">
<p class="boton-tema">Entrar</p>
</a>
</div>
<div class="tema">
<img src="" class="thumbnail">
<h2 class="titulo-tema">titulo del subtema</h2>
<hr>
<p>Esta descripcion demuestra que tema se esta explicando</p>
<a href="">
<p class="boton-tema">Entrar</p>
</a>
</div>
<div class="tema">
<img src="" class="thumbnail">
<h2 class="titulo-tema">titulo del subtema</h2>
<hr>
<p>Esta descripcion demuestra que tema se esta explicando</p>
<a href="">
<p class="boton-tema">Entrar</p>
</a>
</div>
<div class="tema">
<img src="" class="thumbnail">
<h2 class="titulo-tema">titulo del subtema</h2>
<hr>
<p>Esta descripcion demuestra que tema se esta explicando</p>
<a href="">
<p class="boton-tema">Entrar</p>
</a>
</div>
<div class="tema">
<img src="" class="thumbnail">
<h2 class="titulo-tema">titulo del subtema</h2>
<hr>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus tincidunt vehicula. Sed nec ante molestie, dignissim sapien et, finibus felis. Mauris a enim eget sapien laoreet interdum id a tellus. Duis blandit et lorem non aliquet. Vivamus
id tellus ut eros finibus tempor ac ac sem. Etiam lacinia nisl eu varius ullamcorper. Vestibulum finibus ligula aliquam ipsum fringilla, nec luctus dolor ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur est est, aliquet
ut commodo at, luctus sit amet nunc. Aenean in aliquet neque, vitae commodo tellus. Nulla et semper massa. Quisque tristique turpis ante, non semper libero fringilla a. Praesent et arcu id massa semper iaculis. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; </p>
<a href="">
<p class="boton-tema">Entrar</p>
</a>
</div>
</div>
</body>
</html>我只是期望获得适当的保证金，因此每次在索引上发布长文本时不会出现此问题
我很难确切告诉您您想要最终结果的位置，并且由于我没有50个声誉的事实，我无法发表评论。但是，在查看了代码之后，而不是进行FlexBox，您只需在.tema类中添加"宽度：40％"。这将使Divs无法扩展到另一个领域(我个人认为保证金不是最好的方法，至少不是我要做的。(如果我为此，则是代码我了解您希望最终结果正确的内容(让大型文本Div不溢出到正确的区域(。这至少应该修复该区域的一部分，但请注意，此代码无法修复您的媒体查询或其他类别。.我希望我以您寻找的方式回答
* {
margin: 0;
padding: 0;
}
body {
background-color: #003300;
}
.nav {
background-color: #00b300;
margin-bottom: 0%;
}
ul {
margin-left: 75%;
}
li {
padding: 20px;
display: inline-block;
}
a {
text-align: center;
color: white;
list-style: none;
text-decoration: none;
}
li:hover {
-moz-transition-duration: 0.3s;
background-color: #004d00;
}
.post {
padding: 20px;
background-color: white;
margin-right: 5%;
margin-left: 30%;
margin-top: 5%;
border-radius: 15px;
}
h1 {
text-align: center;
}
.form {
background-color: #404040;
margin-left: 1%;
margin-right: 70%;
padding: 20px;
border-radius: 15px;
}
.link {
background-color: #19194d;
margin-left: 15px;
margin-right: 15px;
padding: 10px;
border-radius: 15px;
color: white;
}
.link:hover {
background-color: #0c0c27;
-moz-transition-duration: 0.3s;
}
* {
margin: 0;
padding: 0;
}
body {
background-color: #003300;
}
.nav {
background-color: #00b300;
margin-bottom: 0%;
}
ul {
margin-left: 75%;
}
li {
padding: 20px;
display: inline-block;
}
a {
text-align: center;
color: white;
list-style: none;
text-decoration: none;
}
li:hover {
-moz-transition-duration: 0.3s;
background-color: #004d00;
}
.post {
padding: 20px;
background-color: white;
border-radius: 15px;
}
h1 {
text-align: center;
}
.form {
background-color: #404040;
padding: 20px;
border-radius: 15px;
}
.link {
background-color: #19194d;
margin-left: 15px;
margin-right: 15px;
padding: 10px;
border-radius: 15px;
color: white;
}
.link:hover {
background-color: #0c0c27;
-moz-transition-duration: 0.3s;
}
/* Flex container */
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20px;
}
/* Make post larger than form */
.post {
flex: 3;
margin-left: -65%;
}
.form {
flex: 1;
}
.tema {
background-color: white;
margin-top: 20px;
margin-left: 2%;
padding: 20px;
border-radius: 15px;
width: 40%;
}
.thumbnail {
border: solid;
width: 100%;
height: 100px;
}
.titulo-tema {
text-align: center;
}
.boton-tema {
background-color: #00b300;
text-align: center;
padding: 20px;
margin-left: 150px;
margin-right: 150px;
margin-top: 20px;
border-radius: 15px;
}
.boton-tema:hover {
background-color: #004d00;
-moz-transition-duration: 0.3s;
}
.container-temas {
display: flex;
justify-content: space-between;
padding: 20px;
flex-wrap: wrap;
}
@media screen and (min-width: 480px) {
ul {
margin-left: 0%;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20px;
}
.post {
margin-left: 0%;
margin-bottom: -40%;
margin-right: 0%;
}
.form {
margin-right: 20%;
margin-left: 20%;
}
li {
padding: 70px;
}
h1 {
font-size: 50px;
}
p {
font-size: 40px;
}
.titulo-tema {
font-size: 50px;
}
}
@media screen and (min-width: 767px) {
ul {
margin-left: 35%;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20px;
}
.post {
margin-left: 0%;
margin-bottom: -80%;
margin-right: 0%;
}
.form {
margin-right: 20%;
margin-left: 20%;
}
li {
padding: 70px;
}
h1 {
font-size: 70px;
}
p {
font-size: 40px;
}
.titulo-tema {
font-size: 70px;
}
}
@media screen and (min-width: 1030px) {
ul {
margin-left: 75%;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 20px;
}
.post {
margin-left: -65%;
margin-bottom: 0%;
margin-right: 0%;
}
.form {
margin-right: 70%;
margin-left: 0%;
margin-bottom: 0%;
}
li {
padding: 20px;
}
h1 {
font-size: 30px;
}
p {
font-size: 20px;
}
.titulo-tema {
font-size: 30px;
}
}<div class="nav">
<ul>
<a href="">
<li>tema 1</li>
</a>
<a href="">
<li>tema 2</li>
</a>
<a href="">
<li>tema 3</li>
</a>
</ul>
</div>
<div class="container-temas">
<div class="tema">
<img src="" class="thumbnail">
<h2 class="titulo-tema">titulo del subtema</h2>
<hr>
<p class="descripcion-breve">Esta descripcion demuestra que tema se esta explicando</p>
<a href="">
<p class="boton-tema">Entrar</p>
</a>
</div>
<div class="tema">
<img src="" class="thumbnail">
<h2 class="titulo-tema">titulo del subtema</h2>
<hr>
<p>Esta descripcion demuestra que tema se esta explicando</p>
<a href="">
<p class="boton-tema">Entrar</p>
</a>
</div>
<div class="tema">
<img src="" class="thumbnail">
<h2 class="titulo-tema">titulo del subtema</h2>
<hr>
<p>Esta descripcion demuestra que tema se esta explicando</p>
<a href="">
<p class="boton-tema">Entrar</p>
</a>
</div>
<div class="tema">
<img src="" class="thumbnail">
<h2 class="titulo-tema">titulo del subtema</h2>
<hr>
<p>Esta descripcion demuestra que tema se esta explicando</p>
<a href="">
<p class="boton-tema">Entrar</p>
</a>
</div>
<div class="tema">
<img src="" class="thumbnail">
<h2 class="titulo-tema">titulo del subtema</h2>
<hr>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus tincidunt vehicula. Sed nec ante molestie, dignissim sapien et, finibus felis. Mauris a enim eget sapien laoreet interdum id a tellus. Duis blandit et lorem non aliquet. Vivamus id
tellus ut eros finibus tempor ac ac sem. Etiam lacinia nisl eu varius ullamcorper. Vestibulum finibus ligula aliquam ipsum fringilla, nec luctus dolor ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur est est, aliquet
ut commodo at, luctus sit amet nunc. Aenean in aliquet neque, vitae commodo tellus. Nulla et semper massa. Quisque tristique turpis ante, non semper libero fringilla a. Praesent et arcu id massa semper iaculis. Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia Curae; </p>
<a href="">
<p class="boton-tema">Entrar</p>
</a>
</div>
</div>