Html 什么'；在网页上布置主要文字和照片的有效方法是什么？
我目前正在使用Flexbox在屏幕上显示主要文本和图像。 我的设置方式非常好，左边是文本，右边是宽视口中的照片，小视口中只有一列内容。但也有缺点：在一个小视口中，所有图像都堆积在底部，而不是与文本混合。在宽视口中，我无法控制图像垂直显示的位置，也无法控制它们是否与左侧的文本很好地对应。另外，同样的ol'双栏布局在大型网站上会有点重复 我目前的做法是：我创建了两列，第一列使用66%的弹性基础，另一列使用33%。我将主文本放在第一个flex项中，然后将图像放在第二个flex项中。在宽视口中，我将“弯曲方向”设置为“行”，以便文本显示在左侧，照片显示在右侧。在小视口中，两个flex项的flex basis都设置为100%，flex direction设置为column，因此它们堆叠在一列中Html 什么'；在网页上布置主要文字和照片的有效方法是什么？,html,css,layout,flexbox,Html,Css,Layout,Flexbox,我目前正在使用Flexbox在屏幕上显示主要文本和图像。 我的设置方式非常好，左边是文本，右边是宽视口中的照片，小视口中只有一列内容。但也有缺点：在一个小视口中，所有图像都堆积在底部，而不是与文本混合。在宽视口中，我无法控制图像垂直显示的位置，也无法控制它们是否与左侧的文本很好地对应。另外，同样的ol'双栏布局在大型网站上会有点重复 我目前的做法是：我创建了两列，第一列使用66%的弹性基础，另一列使用33%。我将主文本放在第一个flex项中，然后将图像放在第二个flex项中。在宽视口中，我将“弯
我相信还有比这更好的方法在所有内容周围制作一个容器，将每个部分设置为包含文本和图像
.container{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
最大宽度：75vw；
}
.项目{
显示器：flex；
弯曲方向：立柱；
保证金：2rem 0；
}
.项目.正文{
保证金：1rem；
}
.项目.图像{
保证金：1rem；
}
.项目.图像img{
最大高度：120px；
}
@介质和全部（最小宽度：650px）{
.项目{
弯曲方向：行；
}
}
lorem ipsum更多文本lorem ipsum更多文本lorem ipsum更多文本lorem ipsum更多文本
lorem ipsum更多文本lorem ipsum更多文本lorem ipsum更多文本lorem ipsum更多文本
lorem ipsum更多文本lorem ipsum更多文本lorem ipsum更多文本lorem ipsum更多文本