过去几天我一直在从事一个项目，但是遇到一个视觉错误，显示我的盒子没有适当的右边距。
我曾尝试过更改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>
我只是希望能获得适当的利润，所以每次在索引上发布长文本都不会发生此问题
答案 0 :(得分：0)
对于我来说，很难确切地说出您希望最终结果在哪里，而且由于我的声誉不高，因此我无法发表评论。但是，在查看了代码之后，不必做一个Flexbox，您只需在.tema类中添加一个“ width：40％”。这将使div不能扩展到其他区域（我个人认为，边距并不是最好的选择，至少不是我要做的。）这是我的代码知道您希望最终结果是正确的（大文本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>