使用 flexbox（无浮动）或其他任何东西将元素包裹在图像周围

Posted 2023-03-07

【中文标题】使用 flexbox（无浮动）或其他任何东西将元素包裹在图像周围

【英文标题】：Wrap elements around an image with flexbox (no float), or anything else

【发布时间】：2016-08-21 02:07:27

【问题描述】：

我正在处理一个页面，我希望响应式 img 与我的 section flex 容器的左侧对齐，h1 和 p 文本在图像的右侧，使用 @987654328 @。

section flex 容器中有更多文本和元素，但我希望它们位于 img 下方。

目标：

我使用codepen 作为沙盒来完成任务。但由于某种原因，h1 不是水平的，而是垂直对齐的。随着屏幕尺寸的减小，图像没有保持其纵横比。其余元素不会相互堆叠。

对于小屏幕，我希望元素按以下顺序堆叠在一起：

img h1 p a a

等等……

【参考方案1】：

我更改了结构以适应行和列流的交替模式。看起来你已经掌握了 flexbox 的基础知识。我担心的是缺少任何填充，并且给 main 的高度是 1000vh。这实际上是 10 个视口堆叠在一起。

main  background-color: Gainsboro; height: 1000vh; overflow-y: scroll; 

CODEPEN

【讨论】：

.frame 由于margin: 0 auto; 而居中，而max-width: 1000px; 作为frame 位于页面中心。但我无法在你的 codepen 上这样做

您可以使用 body class=col 而不是添加额外的 (div class=col) 元素。语义美=_-

不，先生。那是故意的。除非我从头开始构建布局并提前计划，否则我永远不会让 body 成为 flex 容器。在处理身体时，有一些特殊的考虑因素需要考虑。文档 :root () 和正文应该用作页面其余部分的基础和参考。被动影响不是主动控制。

由于.frame没有固定的宽度，给它分配这个样式：left:50%; transform: translateX (-50%);

顺便说一句，我故意把它做成了一个 div，它突出显示div.col 是布局第一层的弹性容器。请注意，我使用了 和 ，尽管我也应该将 下的 div.col 更改为 。