基于包含标签、文本框和div占位符的布局设计HTML表单

我正在用HTML编写一个特定的表单，我起草了一份草稿，希望实现以下布局：

“Title”、“Category”和“LeaseNumber”是标签，后面是文本框，蓝色方块表示一个占位符div，我将在其中添加背景图像

我在实现如上图所示的布局时遇到了一些问题，希望能在这方面得到一些帮助。我现在有以下几点：

.outer{
边框：1px纯黑；
}
.小输出字段{
宽度：5%；
}
.long_输出_字段{
宽度：15%；
}
#img_占位符{
边框：1px纯黑；
宽度：50px；
高度：20px；
背景颜色：蓝色；
}

房型
标题
类别
出租人

你可以这样做

.outer{
边框：1px纯黑；
填充：10px；
}
.flexDiv{
显示器：flex；
证明内容：之间的空间；
利润率：0.10px；
}
.long_输出_字段{
宽度：15%；
}
#img_占位符{
边框：1px纯黑；
宽度：50px；
高度：20px；
背景颜色：蓝色；
}
.form_fields_long{
宽度：100%；
}
.long_输出_字段{宽度：300px；}

房型
标题
类别
出租人

正如承诺的那样，可以使用网格轻松干净地完成。我只是选择了“随机”间隔。你可以根据自己的喜好调整间隙。网格可以像表格一样使用，在HTML方面没有什么优势，也不那么费力

不得不稍微修改一下你的HTML代码。class=“outer”现在是网格包装器，所有不需要的内容都被删除，因此所有标签和输入字段现在都是.outer的直接子项。否则，网格将无法干净地应用

.outer{
显示：网格；
宽度：100%；
网格模板列：重复（5，1fr）；
网格自动行：自动；
栅柱间隙：10px；
网格行间距：5px；
}
#头衔{
网格柱：1/2；
网格行：1/2；
文本对齐：右对齐；
}
#标题字段{
网格柱：2/3；
网格行：1/2；
}
#类别{
网格柱：3/4；
网格行：1/2；
文本对齐：右对齐；
}
#猫场{
网格柱：4/5；
网格行：1/2；
}
#img_占位符{
网格柱：5/6；
网格行：1/2；
边框：1px纯黑；
背景颜色：蓝色；
}
#租赁{
网格柱：1/2；
网格行：2/3；
文本对齐：右对齐；
}
#租借地{
网格柱：2/5；
网格行：2/3；
}

房型
标题
类别
出租人

另一种解决方案是使用网格区域的网格布局。这更容易阅读和理解

.outer{
边框：1px纯黑；
填充：10px 5px；
显示：网格；
网格模板列：1fr 2fr 1fr 2fr 1fr；
网格模板行：1fr 0.5fr 1fr；
网格模板区域：
“标题标题字段类别类别类别字段图像”
". . . . ."
“租赁租赁\现场租赁\现场租赁\现场。”；
}
.头衔{
网格区域：标题；
}
#标题字段{
网格区域：标题_字段；
左边缘：.5rem；
}
.租赁{
网格面积：租赁；
}
#租借地{
网格区域：租赁_字段；
左边缘：.5rem；
}
.类别{
网格区域：类别；
左：2rem；
}
#猫场{
网格区域：cat_字段；
左边缘：.5rem；
}
#img_占位符{
边框：1px纯黑；
宽度：50px；
高度：20px；
背景颜色：蓝色；
网格区域：图像；
左边距：2em；
}

标题
类别
İmage
出租人

最简单的方法是使用CSS网格。如果没有其他人会在30分钟内完成，我会为你完成（还有工作要做）。