Html div底部的文本

我的文本自动转到div的底部，如下图所示

我想在div的顶部，在标题下列出一个列表，这样它看起来就干净了。 这是密码

.main{
左边距：160像素；
字号：28px；
填充：0px 10px；
溢出：滚动；
}
主保险商实验室{
左边距：15px；
显示：块；
保证金：2px0；
浮动：左；
}
#bloc1，#bloc2{
显示：内联块；
}
#bloc2-img{
最大宽度：700px；
边缘顶部：50px；
左边距：100px；
}
.main h1{
颜色：rgb（95,95,95）；
}

穆罕默德·阿里

介绍
沃特信息
接触

如果需要，为什么要在

块

div元素上使用

内联块

？与名称状态一样，它们将“内联”。所以去掉那种风格

同时删除浮动：左。请勿将“左浮动”用于布局目的。左浮动用于其他场景

编辑：在你的评论之后，我想我理解了你真正想要的。 为此，请使用flexbox。看看下面

.main{
左边距：160像素；
字号：28px；
填充：0px 10px；
溢出：滚动；
显示器：flex；
弯曲方向：行；
柔性包装：包装；
}
.main h1{
弹性：0.100%；
}
主保险商实验室{
左边距：15px；
显示：块；
保证金：2px0；
}
#bloc2-img{
最大宽度：700px；
边缘顶部：50px；
左边距：100px；
}
.main h1{
颜色：rgb（95,95,95）；
}

穆罕默德·阿里

介绍
沃特信息
接触

如果需要，为什么要在

块

div元素上使用

内联块

？与名称状态一样，它们将“内联”。所以去掉那种风格

同时删除浮动：左。请勿将“左浮动”用于布局目的。左浮动用于其他场景

编辑：在你的评论之后，我想我理解了你真正想要的。 为此，请使用flexbox。看看下面

.main{
左边距：160像素；
字号：28px；
填充：0px 10px；
溢出：滚动；
显示器：flex；
弯曲方向：行；
柔性包装：包装；
}
.main h1{
弹性：0.100%；
}
主保险商实验室{
左边距：15px；
显示：块；
保证金：2px0；
}
#bloc2-img{
最大宽度：700px；
边缘顶部：50px；
左边距：100px；
}
.main h1{
颜色：rgb（95,95,95）；
}

穆罕默德·阿里

介绍
沃特信息
接触

您是否尝试过在

#main

上使用display:flex如下：

 .main {
    margin-left: 160px; 
    font-size: 28px; 
    padding: 0px 10px;
    overflow: scroll;
    display:flex;
    flex-direction: column;
    align-items: center;
  }

---

您是否尝试过在

#main

上使用display:flex，如下所示：

 .main {
    margin-left: 160px; 
    font-size: 28px; 
    padding: 0px 10px;
    overflow: scroll;
    display:flex;
    flex-direction: column;
    align-items: center;
  }

---

好的，这使得文本放在上面，下面的图像，我想让它们并排。虽然如果我把伸缩方向改成行，它会做我想做的事情，但是标题也会变成一行。这会使文本放在上面，而下面的图像，我希望它们并排排列。虽然如果我将flex方向更改为row，它会做我想做的事情，但标题也会变成一行。这会使它们彼此位于下方（图像和列表），但我希望它们并排

我希望在div顶部的标题下创建一个列表，使其看起来干净。这是代码

？和img并肩作战怎么样？不管怎样，我编辑了代码。对不起，我应该澄清我想要什么。我希望标题在上面，下面是一个列表，列表之外还有一张图片。基本上是向上移动文本，但仍然在图像之外。谢谢你的编辑，我要试试这个！这使它们彼此位于下方（图像和列表），但我希望它们并排

我希望在div顶部的标题下创建一个列表，以便它看起来干净。这是代码

？和img并肩作战怎么样？不管怎样，我编辑了代码。对不起，我应该澄清我想要什么。我希望标题在上面，下面是一个列表，列表之外还有一张图片。基本上是向上移动文本，但仍然在图像之外。谢谢你的编辑，我要试试这个！