定位HTML div，使其中一个比另一个小

我有一个问题，最好用我正在连接的线框来表示。我需要一种方法来构造页面，使注册区域（线框中有输入字段的区域）大于页面左侧的区域（较小的区域将显示一张图片）

问题：使用尽可能简单的HTML和CSS，最好的方法是什么

我的尝试：我尝试了一种可能的方法，但这只是对margin-top-CSS属性的攻击

*{
/*框大小：边框框*/
}
.行{
背景色：透明；
保证金：自动；
宽度：75%；
}
/*创建两个相邻浮动的相等列*/
.栏目{
浮动：左；
宽度：50%；
填充：10px；
/*身高：200%*/
}
/*清除列后的浮动*/
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
#c1{
背景色：#aaa；
宽度：30%；
利润率最高：4%；
利润底部：5%；
}
#c2{
/*宽度：60%*/
背景色：#bbb；
}

两个相等的列
第1栏
一些文字

第2栏
一些文字

一些文字

一些文字

有很多方法可以做到这一点，但这里有一种潜在的方法。希望就是帮助：）

应要求作出一些解释：

这里要知道的关键是css属性显示、文本对齐和垂直对齐

显示：内联块；告诉元素它们应该并排放置

垂直对齐：指示元素应在其容器内垂直居中

文本对齐：居中；指示容器将内联块元素居中放置

字号：0；在容器上，只是因为内联块添加了一个神秘的空间

这是一个非常简单的解释，但我建议你去W3学校看看他的财产和他们的行为。

div{
边框：1px实心#000；
}
.行{
填充：10px；
文本对齐：居中；
显示：块；
字号：0；
}
.小{
显示：内联块；
宽度：200px；
高度：200px；
垂直对齐：中间对齐；
字体大小：12px；
}
.大{
显示：内联块；
宽度：200px；
高度：300px；
垂直对齐：中间对齐；
字体大小：12px；
}

A.
B

希望这就是你需要的。
flexbox在对齐项目方面提供了更高的效率。
div{
边框：1px实心#000；
}
.内部{
显示器：flex；
对齐项目：居中；
对齐内容：居中；/*如果需要图像和内容之间的空间，请均匀使用空间*/
填充：20px；
利润率：10px；
文本对齐：居中；
字号：0；
}
.形象{
显示：内联块；
宽度：150px；
高度：200px；
字体大小：12px；
}
.内容{
显示：内联块；
宽度：250px；
高度：300px；
字体大小：12px；
}

以下是flexbox的一个简单示例：

.container{
显示器：flex；
对齐项目：居中；
宽度：100%；
最小高度：100px；
证明内容：中心；
背景色：#d9d9ff；
}
.小{
背景色：#caffff；
弹性：25；
}
.大{
填充：1rem0 1rem0；
背景色：#f5c0c0；
弹性：25；
}

小的
大的

可以使用flexbox。将柱垂直和水平居中：

.vh {
  justify-content: center;
  align-items: center;
}

总计

*{
/*框大小：边框框*/
}
身体{
背景：#ddc；
}
.行{
背景色：透明；
左边距：自动；
右边距：自动；
宽度：75%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
填充：10px；
}
/*创建两个相邻浮动的相等列*/
.栏目{
宽度：50%；
填充：10px；
/*身高：200%*/
}
/*清除列后的浮动*/
#c1{
背景色：#aaa；
}
#c2{
/*宽度：60%*/
背景色：#bbb；
}

两个相等的列
第1栏
一些文字

第2栏
一些文字

一些文字

一些文字

使用边距不是一种技巧，它与定位相结合，是一个人用来完成你的要求的东西。在您的例子中，如果左侧元素有一个填充，那么在本例中，保存图像的内部元素似乎也是一个可行的选项。这样做的好处是，它将是动态的，其中一个或另一个会根据其他内容进行调整，例如固定高度。顺便说一句，没有最好的方法，只有不同的解决方案才能实现相同的结果，因此你的问题离题了/太宽泛了。@LGSon我基本同意你所说的，我称之为“黑客”，因为它不是动态的，在分辨率变化时也不会保持比例。我也应该用“更好的方式”，而不是最好的方式。事实上，即使用更好的方式，你的问题也是离题的，既过于宽泛，又主要基于观点。相反，重新表述它，并询问如何使其动态/基于内容（其中Flexbox/CSS网格是能够使它们平等增长的网格）。使用Flexbox或甚至绝对位置也可能是很好的选择。虽然这段代码可以回答这个问题，提供关于如何解决问题以及为什么解决问题的附加上下文将提高答案的长期价值。@数字污染-是的，这很有帮助。我会接受答案，但请添加一些细节，说明为什么/如何通过添加的代码解决问题。我做了一些基本解释，其他人给出了flex示例，如果浏览器支持