css 更改桌面上的div位置

tzcvj98z  于 2022-11-26  发布在  其他
关注(0)|答案(3)|浏览(144)

我有这2个div(footer-txtfooter-img),在移动的上它工作得很完美,因为我想要顶部的文本和底部的2个图像,就像并排一样。
但是当屏幕变宽时,我希望两个图像并排,还有文本div。就像一行两个图像和文本。
有什么办法能让我做到吗?
第一个

q3qa4bjr

q3qa4bjr1#

如果我理解正确的话,您可以将此css放在id #footer-content中:

#footer-content {
  display: flex;
  flex-direction: row;
}

这样,您就可以将div的方向更改为一行。
如果您只在不移动的时需要此信息,则可以添加以下行:

@media screen and (min-width: 960px) {
   #footer-content {
      display: flex;
      flex-direction: row;
   }
}
jhdbpxl9

jhdbpxl92#

使用Flex-BoxGrid以及使用Media Queries的响应式CSS可以实现所需的解决方案

第一个

qfe3c7zg

qfe3c7zg3#

你必须使文本和两个图像都成为一个flex项。你可以通过定义footer-content的flex属性来实现这一点。它的所有直接子项都是flex项。
下面是对Flex的详细说明:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
如果我的解决方案不是你在寻找什么,你可能也在寻找断点和媒体查询的响应设计。
第一个

相关问题