Html 使用div为内容创建容器

我正在构建一个小页面，我有一个div内容包装器，其中有几个div包含实际内容。只是出于某种原因，我想要保存文本的div没有保存文本。最终，我试图在照片和文本之间增加一点空间。请注意文本的第一行与图像之间的间距，而其余的行与图像相邻。代码如下：

#内容包装{
宽度：700px；
边际：0px；
填充：50px 0px 0px；
}
#内容与照片{
垂直对齐：顶部；
边际：0px；
填充：0px；
显示：内联；
位置：相对位置；
}
#内容描述{
垂直对齐：顶部；
边际：0px；
填充：0px 0px 0px 100px；
显示：内联；
位置：相对位置；
}
#阿佛托{
宽度：150px；
高度：自动；
}

一大堆随机的文本。一大堆随机的文本。一大堆随机的文本。一大堆随机的文本。一大堆随机的文本。

要将空格添加到右侧，我使用

浮动

和

边距

：

#内容包装{
宽度：700px；
边际：0px；
填充：50px 0px 0px；
}
#内容与照片{
垂直对齐：顶部；
边际：0px；
填充：0px；
显示：内联；
位置：相对位置；
浮动：左；
}
#内容描述{
垂直对齐：顶部；
保证金：0px 0px 0px 10px；
浮动：左；
显示：块；
位置：相对位置；
宽度：535px；
}
#阿佛托{
宽度：150px；
高度：自动；
}

一大堆随机的文本。一大堆随机的文本。一大堆随机的文本。一大堆随机的文本。一大堆随机的文本。

要将空格添加到右侧，我使用

浮动

和

边距

：

#内容包装{
宽度：700px；
边际：0px；
填充：50px 0px 0px；
}
#内容与照片{
垂直对齐：顶部；
边际：0px；
填充：0px；
显示：内联；
位置：相对位置；
浮动：左；
}
#内容描述{
垂直对齐：顶部；
保证金：0px 0px 0px 10px；
浮动：左；
显示：块；
位置：相对位置；
宽度：535px；
}
#阿佛托{
宽度：150px；
高度：自动；
}

一大堆随机的文本。一大堆随机的文本。一大堆随机的文本。一大堆随机的文本。一大堆随机的文本。

您也可以将flex应用于包装div

#内容包装{
宽度：700px；
边际：0px；
填充：50px 0px 0px；
显示器：flex；
}
#内容与照片{
垂直对齐：顶部；
边际：0px；
填充：0px；
位置：相对位置；
}
#内容描述{
垂直对齐：顶部；
边际：0px；
填充：0px 0px 0px 100px；
位置：相对位置；
}
#阿佛托{
宽度：150px；
高度：自动；
}

一大堆随机的文本。一大堆随机的文本。一大堆随机的文本。一大堆随机的文本。一大堆随机的文本。

您也可以将flex应用于包装div

#内容包装{
宽度：700px；
边际：0px；
填充：50px 0px 0px；
显示器：flex；
}
#内容与照片{
垂直对齐：顶部；
边际：0px；
填充：0px；
位置：相对位置；
}
#内容描述{
垂直对齐：顶部；
边际：0px；
填充：0px 0px 0px 100px；
位置：相对位置；
}
#阿佛托{
宽度：150px；
高度：自动；
}

一大堆随机的文本。一大堆随机的文本。一大堆随机的文本。一大堆随机的文本。一大堆随机的文本。

问题在于您使用的是

display:inline而不是
显示：内联块。将元素强制转换为块意味着您必须手动指定容器的宽度，否则块将假定100%的父宽度，从而将元素放在自己的行上

举个例子：
问题在于您使用的是
display:inline而不是
显示：内联块。将元素强制转换为块意味着您必须手动指定容器的宽度，否则块将假定100%的父宽度，从而将元素放在自己的行上

举个例子：
空间很大，对吗？你的问题完全不清楚。好了，现在我明白了。补充了一个答案。行吗？看起来行。你能解释一下它在做什么以及为什么起作用吗？是的，我给了他们两个一个浮动，这样他们就可以互相对齐了。我给了图像一个空白，这样文本和图像之间就有了一个空格。我也给了右边一个宽度，减去图片和整个内容的宽度，这样它就正确地存在了。我相信这个例子的替代答案更简单、更直接+我觉得有很多空间，对吗？你的问题完全不清楚。好了，现在我明白了。补充了一个答案。行吗？看起来行。你能解释一下它在做什么以及为什么起作用吗？是的，我给了他们两个一个浮动，这样他们就可以互相对齐了。我给了图像一个空白，这样文本和图像之间就有了一个空格。我也给了右边一个宽度，减去图片和整个内容的宽度，这样它就正确地存在了。我相信这个例子的替代答案更简单、更直接+你能详细说明一下为什么
inline block
vs
inline
。当您说指定包含文本的div的宽度时？因为您有一个多行元素（一堆文本），所以填充不会作为溢出文本（已包装到新行的文本）呈现在下一行上实际上不在新行上，因此填充仅应用于顶行，其余被忽略（视为一行）。是的，定义块时会自动将宽度指定给auto（父块的宽度），这不允许在其旁边渲染任何其他元素。另一种方法是使用t