Question

我想创建一种杂志类型的布局，其右上角为图像，左侧为元素（文本，框，图像）。挑战在于图像下方的元素应占据整个宽度。

我尝试了

float: right

虽然这会将其他元素包裹在图像周围，但不允许这些元素填满可用宽度。

也尝试过flexbox，但似乎无法找出如何在这种情况下正确使用它的方法。

示例：

当图像更高时：

Answer 1

好吧，最后我通过使用flex-box使它工作了，但是它的方式与我预期的方式不同，而且我不确定这是“合法”的解决方案。

似乎弹性项目填充了其（非弹性）父级的水平空间。

我必须将左元素包装在div中，并将每个元素的显示属性设置为flex。

#leftContent > * {
  display: flex;
}