我有这2个div(footer-txt和footer-img),在移动的上它工作得很完美,因为我想要顶部的文本和底部的2个图像,就像并排一样。但是当屏幕变宽时,我希望两个图像并排,还有文本div。就像一行两个图像和文本。有什么办法能让我做到吗?第一个
footer-txt
footer-img
q3qa4bjr1#
如果我理解正确的话,您可以将此css放在id #footer-content中:
#footer-content
#footer-content { display: flex; flex-direction: row; }
这样,您就可以将div的方向更改为一行。如果您只在不移动的时需要此信息,则可以添加以下行:
div
@media screen and (min-width: 960px) { #footer-content { display: flex; flex-direction: row; } }
jhdbpxl92#
使用Flex-Box或Grid以及使用Media Queries的响应式CSS可以实现所需的解决方案
Flex-Box
Grid
Media Queries
第一个
qfe3c7zg3#
你必须使文本和两个图像都成为一个flex项。你可以通过定义footer-content的flex属性来实现这一点。它的所有直接子项都是flex项。下面是对Flex的详细说明:https://css-tricks.com/snippets/css/a-guide-to-flexbox/如果我的解决方案不是你在寻找什么,你可能也在寻找断点和媒体查询的响应设计。第一个
3条答案
按热度按时间q3qa4bjr1#
如果我理解正确的话,您可以将此css放在id
#footer-content
中:这样,您就可以将
div
的方向更改为一行。如果您只在不移动的时需要此信息,则可以添加以下行:
jhdbpxl92#
使用
Flex-Box
或Grid
以及使用Media Queries
的响应式CSS可以实现所需的解决方案第一个
qfe3c7zg3#
你必须使文本和两个图像都成为一个flex项。你可以通过定义footer-content的flex属性来实现这一点。它的所有直接子项都是flex项。
下面是对Flex的详细说明:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
如果我的解决方案不是你在寻找什么,你可能也在寻找断点和媒体查询的响应设计。
第一个