Html CSS-对齐不共享同一父级的div

我有一个复杂的问题

我有一个包含表单的DIV，我希望标题/输入始终保持一致

为此，我必须对齐两个不共享同一父级且不在同一行中的div

这可能吗

看看这个代码笔：

.page{
显示器：flex；
证明内容：中心；
}
.中心{
填充：0.3vw；
背景色：白色；
证明内容：中心；
}
.row_输入{
显示器：flex；
调整项目：灵活启动；
弯曲方向：行；
/*边框：5px纯色天蓝色*/
}
.行标题{
显示器：flex；
对齐项目：柔性端；
弯曲方向：行；
/*边框：5px纯色天蓝色*/
}
好的{
显示器：flex；
调整项目：灵活启动；
弯曲方向：行；
/*边框：5px纯色天蓝色*/
}
.左内{
证明内容：基线；
显示器：flex；
保证金权利：5vw；
最小宽度：10vw；
弯曲方向：立柱；
弹性：1；
}
.右{
显示器：flex；
最小宽度：10vw；
弹性：1；
弯曲方向：立柱；
}
.title_左{
显示器：flex；
颜色：黑色；
保证金权利：5vw；
柔性包装：包装；
最大宽度：10vw；
最小宽度：10vw；
最大宽度：10vw；
对齐项目：柔性端；
调整内容：灵活启动；
字体系列：Calibri；
}
.标题(右){
显示器：flex；
颜色：黑色；
柔性包装：包装；
最大宽度：10vw；
最小宽度：10vw；
调整内容：灵活启动；
字体系列：Calibri；
}
.input_left_cb{
显示器：flex；
颜色：黑色；
最大宽度：10vw；
最小宽度：10vw；
保证金权利：5vw；
弯曲方向：立柱；
调整项目：灵活启动；
边框：5倍纯粉色；
字体系列：Calibri；
}
.input_左{
显示器：flex；
颜色：黑色；
最大宽度：10vw；
最小宽度：10vw；
保证金权利：5vw；
弯曲方向：立柱；
边框：5倍纯粉色；
字体系列：Calibri；
}
.正确输入{
显示器：flex；
颜色：黑色；
最大宽度：10vw；
最小宽度：10vw；
弯曲方向：立柱；
字体系列：Calibri；
}
.罗尤中心{
显示器：flex；
柔性包装：包装；
利润底部：0.5vw；
证明内容：中心；
}
.行{
显示器：flex；
利润底部：0.5vw；
对齐项目：柔性端；
弯曲方向：行；
利润底部：0.5vw；
/*边框：5px纯色天蓝色*/
}
.左内{
证明内容：基线；
显示器：flex；
保证金权利：5vw；
最小宽度：10vw；
弯曲方向：立柱；
弹性：1；
}
.右{
显示器：flex；
最小宽度：10vw；
弹性：1；
弯曲方向：立柱；
}
.内卢中心{
显示器：flex；
最小宽度：10vw；
证明内容：中心；
}
.头衔{
显示器：flex；
颜色：黑色；
柔性包装：包装；
最大宽度：10vw；
调整内容：灵活启动；
右边距：0.5vw；
字体系列：Calibri；
}
.输入{
显示器：flex；
颜色：黑色；
最大宽度：10vw；
弯曲方向：立柱；
字体系列：Calibri；
}
.input_cb{
显示器：flex；
颜色：黑色；
最小宽度：10vw；
最大宽度：10vw；
弯曲方向：立柱；
调整项目：灵活启动；
字体系列：Calibri；
}
SolidCAM-恢复激活
在本例中，它看起来是正确的。正如您所见，输入/标题总是对齐的。
复选框
在这个例子中，它看起来是正确的。正如您所见，输入/标题总是对齐的。
在下面的示例中，它看起来是正确的。可以在不更改html的情况下修复此问题吗？
复选框
我希望右标题始终与左标题对齐。只有在标题完成后才能开始输入。

谢谢，

---

David

您可以指定每个div的位置：

div.center{
top:0px;
left:20px;
}

---

然后对每个div执行相同的操作。

如果不更改标记，这不能单独使用CSS来完成

原因是它们彼此看不见，因此无法对齐（当然，给它们一个固定的高度是可行的，尽管你可能不想这样）

一种可能的解决方法是，在删除

/

元素的情况下，对标记进行一个小的更改，您可以让它工作

在下面的示例中，我删除了所有类，但控制布局的类除外，以便于查看发生了什么

堆栈片段

.page{
显示器：flex；
证明内容：中心；
}
.中心{
填充：0.3vw；
背景色：白色；
最大宽度：30vw；/*在此处而不是在内部元素上设置最小宽度*/
}
.罗尤中心{
显示器：flex；
柔性包装：包装；
利润底部：0.5vw；
证明内容：中心；
}
.行{
显示器：flex；
柔性包装：包装；
利润底部：0.5vw；
利润底部：0.5vw；
}
.行.标题{
自对准：柔性端；
弹性基准：50%；
顺序：1；
}
.行.输入{
弹性基准：50%；
顺序：2；
}
.row.input textarea{
宽度：100%；
框大小：边框框；
}

复选框
div.center{
top:0px;
left:20px;
}