html - 为什么每次写入大文本时我的 div 框都会变宽？
问题描述
过去几天我一直在做一个项目，但我遇到了一个视觉错误，表明我的盒子没有适当的右边距。
我曾尝试更改 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 名声望，我无法发表评论。然而，在查看代码之后，您可以简单地在 .tema 类中添加一个“width: 40%”，而不是做一个 flexbox。这将防止 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>推荐阅读
- javascript - 我的拖放功能不起作用。我收到一个类型错误。这是什么意思？
- google-cloud-platform - 计算总管道延迟（Cloud Functions -> Pub/Sub -> Dataflow -> BQ）
- design-patterns - Liskov 替换原则 4 题
- c - 每次我声明我的函数时，我的函数所做的变量都会改变。C语言
- c - Munmap_chunk(): 无效指针, Aborted (core dumped), realloc(): 无效的下一个大小
- javascript - 从 webapp 中的按钮访问外部 js 文件中的函数
- labview - 未针对此 I/O 控制类型实现
- php - 数据库连接处于活动状态时，Curl 不起作用
- c++ - 如何在主函数之外访问数组？
- kubernetes - 创建子网管理器失败：asn1：结构错误：标签不匹配