【我与bug那些事】CSS响应式布局--（解决 F12右侧打开控制台，往左挤压，出现的问题）

响应式布局–（解决 F12右侧打开控制台，往左挤压，出现的问题）

问题一：模型删除按钮下移

解决方法：

1.上图大框整体设置一个.flex（默认横向排列），整体分为两部分（两个div）

挤压时，最外部的div未加flex：

挤压时，最外部的div加了flex之后：

2.左边这里是一个div(占据整个大div宽度的40%)，加上.vertical-horizontal-start样式后，固定在最左边：

3.右边这里是一个div(占据整个大div宽度的60%)，加上.vertical-horizontal-end样式后，固定在最右边：

加上display:flex后

加上align-items:center后

当没加上justify-content:flex-end时

当加上justify-content:flex-end后，固定到最右边

4.最后不断挤压，也不会变形了

---

问题二：框被按钮挡住

解决方法：

这里使用了 【antd Grid栅格】布局实现

具体详情请看 👇

官方文档： https://ant-design.gitee.io/components/grid-cn/

实现效果：

---

问题三：antd-form表单挤压变形

解决方法：自定义公共样式ant-form-wrap并添加上去

---

问题四：antd-table表格某一列的字段挤压变形

解决方式：

1.在Table组件中加上scroll属性


2.在需要滚动的字段加上fixed即可

3.在此div框中加上字段不换行的class

word-break: keep-all

实现效果

问题五：图片挤压变形

解决方法：

1.把图片和文字区分为两个div,加上left和right的样式

<div className="my-content">
  <div className="top">
    <div className="left"><img src={data.img} alt=""/></div>
    <div className="right">
      <p className="title">{data.title}</p>
      <ul className="content">
        {_.map(data.content, item => <li>{item}</li>)}
      </ul>
    </div>
  </div>
  <a 
    className="bottom" 
    href={data.href}
  >
    开始使用
  </a>
</div>

.my-content

display:flex
flex-direction:column // 垂直排列
justify-content:space-between // 两端对齐，项目之间的间隔都相等
flex: 1

flex:1


作用：

flex:1 参考下面博客
https://zhuanlan.zhihu.com/p/136223806

.top

display:flex

.left

flex:30
position:relative // 相对于整体的30% flex

img

width:100%
left:0
top:50%
transform:translateY(-50%) // 垂直居中
position:absolute
object-fit:scale-down

这部分资料引用下面博客
https://www.cnblogs.com/ranyonsue/p/9367423.html

.right

flex:70
font-weight:400
 .title:{
   font-size:18px
   opacity:.85
   margin-bottom:15px
   padding-left:20px
}
.content{
  font-size:13px
  opacity:.65
  padding-left:40px
}

.bottom

 font-size:18px
 font-weight: 400
 text-align:center // 文字水平居中
 cursor:pointer

2.最外层框+ min-width:1024px

实现效果