html - 调整大小时图像问题不会转到下一列
问题描述
编程新手,这个一直困扰着我很长一段时间。调整浏览器大小时,图像不会在.text
课程之后进入下一行,而是超出页面并向右移动。这是相关的html和css:
main{
display: flex;
position: relative;
justify-content: space-between;
}
#image{
height: 80vh;
box-shadow: 8px 3px 10px gray;
margin: 10px;
border-radius: 1%;
}
.text{
animation: fade-in;
animation-duration: 2s;
margin-left: 20px;
padding-left: 40px;
margin-right: 10px;
padding-bottom: 20px;
margin-bottom: 20px;
@media screen and (max-width: 500px){
.main{
position: static;
flex-direction: column;
box-sizing: unset;
}
#image{
display: block;
position: static;
}
<main>
<div class="text">
<h1></h1>
<p></p>
<p></p>
<button </button>
<button </button>
</div>
<img id="image" src="/images/image1.jpg" alt="">
</main>
解决方案
您需要 >flex-wrap: wrap
作为main
元素。因为,默认情况下,display: flex
它将所有子元素放在一行中,在您指定之前不允许它们换行。
此外,对于@media screen,您编写了 .main 并且它应该只是 main,因为它不是一个类。
推荐阅读
- javascript - 是否有用于检查它是否包含另一个数组但顺序很重要的数组函数?
- python - Aws CloudWatch 在 python 中获取日志组和日志流数据
- javascript - 表单事件的 `nativeEvent.submitter.name` 会在所有浏览器中始终如一地工作吗?
- sql-server - 如何在 SQL Server 中将行分组在一起?
- c++ - 构造函数继承行为怪异
- inno-setup - Inno Setup:根据所选组件向 InputQueryPage 添加字段
- java - 非弹簧应用程序中resttemplate的Junit
- c++ - 尝试创建唯一指针给我一个错误
- java - 拖动绘制的形状
- firebase - 如何在 Flutter 日历应用中列出事件