Html 基于内容问题的高度相对定位

你好，我正在努力做到这一点

在这个例子中，你可以看到，我们有3个div。顶部的宽度为100%，高度为：自动。当然也会相对定位

第二个相同，但在本例中，我将添加一个虚拟文本，用于定义div的高度

第三个和第一个一样，问题是，它们没有对齐。不是一个接一个。有人能告诉我我的代码有什么问题吗？谢谢

#块1{
位置：相对位置；
宽度：100%；
高度：自动；
背景颜色：蓝色；
}
#img1{
宽度：100px；
高度：100px；
位置：绝对位置；
左：50%；
转换：翻译（-50%）；
-webkit转换：翻译（-50%）；
}
#区块2{
位置：相对位置；
宽度：100%；
高度：自动；
背景颜色：橙色；
}
.dummytext{
字体系列：“Rallway，无衬线”；
字体大小：20px；
文本对齐：对齐；
利润率：10px；
}
#区块3{
位置：相对位置；
宽度：100%；
高度：自动；
背景颜色：棕色；
}
#img2{
宽度：100px；
高度：90px；
位置：绝对位置；
左：50%；
转换：翻译（-50%）；
-webkit转换：翻译（-50%）；
}

文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，

这是因为您的图像位置不正确，这不会影响容器的大小。 您应该删除图像的绝对位置

试试这个：

div{
文本对齐：居中；/*将div内的所有内容居中*/
}
#区块1{
宽度：100%；
高度：自动；
背景颜色：蓝色；
}
#img1{
宽度：100px；
高度：100px；
}
#区块2{
宽度：100%；
高度：自动；
背景颜色：橙色；
}
.dummytext{
字体系列：“Rallway，无衬线”；
字体大小：20px；
文本对齐：对齐；
利润率：10px；
}
#区块3{
宽度：100%；
高度：自动；
背景颜色：棕色；
}
#img2{
宽度：100px；
高度：90px；
}

文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，

要控制div的布局，您应该给它们一个display属性。尝试添加显示：表格行；对于每个块

您不需要使用绝对定位来完成此操作。使用默认的静态定位和使用

margin:0 auto

将物体居中更容易（更安全），例如：

#block1 {
width:100%;
background-color: blue;
}

#img1 {
height: 100px;
width: 100px;
margin: 0 auto;
}

#block2 {
width:100%;
background-color: orange;
}

.dummytext {
font-family: 'Ralleway, sans-serif';
font-size: 20px;
text-align: justify;
margin:10px;
}

#block3 {
width:100%;
background-color: brown;
}

#img2 {
width:100px;
height:90px;
margin 0 auto;
}

---

这是实现所需布局的最标准解决方案。

由于在元素上设置了属性

位置，因此元素未显示。
要实现此功能，请在
img
标记周围添加
table
元素，并在其上设置
margin:auto
属性


#块1{
宽度：100%；
高度：自动；
背景颜色：蓝色；
}
#img1{
宽度：100px；
高度：100px；
左：50%；
转换：翻译（-50%）；
-webkit转换：翻译（-50%）；
}
#区块2{
宽度：100%；
高度：自动；
背景颜色：橙色；
}
.dummytext{
字体系列：“Rallway，无衬线”；
字体大小：20px；
文本对齐：对齐；
利润率：10px；
}
#区块3{
宽度：100%；
高度：自动；
背景颜色：棕色；
}
#img2{
宽度：100px；
高度：90px；
左：50%；
转换：翻译（-50%）；
-webkit转换：翻译（-50%）；
}
桌子{
保证金：自动；
}

文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，文本示例，
因为您的img是
位置：绝对的
。为什么？我喜欢这个答案，而且margin:auto也适用于中心元素+1票赞成