Html 对齐段落上方的项目，并在图像旁边浮动

我正在努力做到这一点：

我不知道如何正确对齐所有东西，而不将它们从容器中推出，或者它们相互重叠。我试图将我的图片向左浮动，标题、按钮和描述向右浮动。我一直在疯狂地试图弄清楚在CSS中应该修改什么，或者它是否是我在HTML中放置东西的地方

。章节标题{
显示：块；
文本对齐：居中；
垫底：1.5%；
字号：500；
字号：2.8em；
转化：translateX（0%）translateY（-25%）；
/*z指数：0*/
}
.章节标题重点{
位置：相对位置；
颜色：黑色；
}
.章节标题重点：之前{
内容：''；
显示：块；
高度：12px；
宽度：100%；
背景：#35FCCE；
位置：绝对位置；
底部：0；
左：0；
过渡：高度5s；
z指数：-1；
}
.节标题突出显示：悬停：之前{
身高：85%；
}
a{
文字装饰：无；
游标：默认值；
显示：块；
}
.集装箱{
垫面：3%；
左：5%；
右：5%；
垫底：7%；
边际上限：0；
左缘：5%；
保证金权利：5%；
利润底部：5%；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
身高：100%；
背景色：rgb（236236236）；
}
.货柜物品{
显示器：flex；
弯曲方向：立柱；
}
.标题栏{
显示：内联块；
左：44%；
字体大小：1.7em；
}
.块图像{
显示：内联块；
宽度：40%；
高度：自动；
浮动：左；
右：4%；
位置：相对位置；
}
.文本块{
显示：内联块；
文本对齐：左对齐；
浮动：对；
}
#计划{
高度：600px；
位置：相对位置；
}

项目
标题

我是baby vape craft啤酒palo santo truffaut倒在定制的hella snackwave lomo上。绑腿木材性小批量8位法兰绒活边。单一来源咖啡早午餐生物柴油
mlkshk，palo santo helvetica工匠affogato吊床雷霆猫十字架波特兰乌贼蛋黄。伐木性工艺啤酒干草叉大师清洗，不对称后讽刺文莫直接贸易实际上是poutine。手工艺啤酒大师清洗
dreamcatcher地铁瓷砖XOXO etsy法兰绒。
绑腿木材性小批量8位法兰绒活边。单一来源咖啡早午餐生物柴油mlkshk，palo santo helvetica工匠affogato hammock thundercats Crossifix波特兰鱿鱼蛋黄。LumberSexy craft啤酒干草叉大师级清洁，
不对称后讽刺文莫直接贸易实际上是波丁。Fingerstache craft beer master cleanse dreamcatcher subway tile XOXO etsy法兰绒Adaptegen无麸质弹出窗口

这很可能是因为您已为容器设置了固定高度

#projects {
    height: 600px;
}

也没什么

使用flexbox。这是这种布局的理想解决方案

您的

。部分标题突出显示是一个span。尝试改用标题标记。这对你会有好处的

下面是一个使用flexbox的快速示例

.container{
背景色：rgb（236236236）；
填充：15px0；
}
.卡片包装{
显示器：flex；
}
.右栏，.左栏{
填充：15px 15px 0 15px；
}
.左栏{
宽度：40%；
}
.右上校{
宽度：60%；
}
.左栏{
宽度：100%；
高度：自动；
}
.卡片包装纸h3{
字体大小：1.7em；
保证金：0；
}
.卡片包装纸{
利润率：12px0；
/*你的帕哈拉图系统*/
}
.章节标题{
显示：块；
文本对齐：居中；
填充底部：30px；
字号：500；
字号：2.8em；
转化：translateX（0%）translateY（0%）；
}
.章节标题重点{
位置：相对位置；
颜色：黑色；
}
.章节标题重点：之前{
内容：''；
显示：块；
高度：12px；
宽度：100%；
背景：#35FCCE；
位置：绝对位置；
底部：0；
左：0；
过渡：高度5s；
z指数：-1；
}
.节标题突出显示：悬停：之前{
身高：85%；
}

项目
标题
我是baby vape craft啤酒palo santo truffaut倒在定制的hella snackwave lomo上。绑腿木材性小批量8位法兰绒活边。单一来源咖啡早午餐生物柴油mlkshk，palo santo helvetica artisan affogato吊床

绑腿木材性小批量8位法兰绒活边。单一来源咖啡早午餐生物柴油mlkshk，palo santo helvetica工匠affogato hammock thundercats Crossifix波特兰鱿鱼蛋黄。伐木性工艺啤酒干草叉

项目
标题
绑腿木材性小批量8位法兰绒活边。单一来源咖啡早午餐生物柴油mlkshk，palo santo helvetica工匠affogato hammock thundercats Crossifix波特兰鱿鱼蛋黄。LumberSexy craft啤酒干草叉大师级清洁，
不对称后讽刺文莫直接贸易实际上是波丁。Fingerstache craft beer master cleanse dreamcatcher subway tile XOXO etsy法兰绒Adaptegen无麸质弹出窗口

标题
绑腿木材性小批量8位法兰绒活边。单一来源咖啡早午餐生物柴油mlkshk，palo santo helvetica工匠affogato hammock thundercats Crossifix波特兰鱿鱼蛋黄。LumberSexy craft啤酒干草叉大师级清洁，
不对称后讽刺文莫直接贸易实际上是波丁。Fingerstache craft beer master cleanse dreamcatcher subway tile XOXO etsy法兰绒Adaptegen无麸质弹出窗口

*{
    margin: 0;
    font-family: sans-serif;
}

.section-title {
    display: block;
    text-align: center;
    padding-bottom: 1.5%;
    font-weight: 500;
    font-size: 2.8em;
}

a {
    text-decoration: none;
    cursor: default;
    display: block;
}

.container {
    padding-top: 3%;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 7%;
    margin-top: 0;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    background-color: rgb(236, 236, 236);
}

.block-image {
    display: inline-block;
    width: 40%;
    height: auto;
    float: left;
    padding-right: 4%;
    position: relative;
}

.block-text {
    display: inline-block;
    text-align: left;
    float: right;
}

#projects {
    height: 600px;
    position: relative;
}

.item{
    display: flex;
    margin-bottom: 3rem;
}
.item img{
    width: 200px;
    height: 200px;
    border: 1px solid #d3d1d0;
}
.item .text{
    margin-left: 3rem;
}
.item .text h1{
    margin-bottom: 1.5rem;
}
.item .text a{
    background-color: black;
    color: white;
    border-radius: 10px;
    padding: 3px 10px;
    display: table;
    margin-bottom: 1.5rem;
    font-size: 14px;
}
.item .text p{
    font-weight: 600;
}

<div class="container">
    <div id="projects">
        <div class="section-title">
            <span class="section-title-highlight">Projects</span>
        </div>
        <div class="items">
            <div class="item">
                <img src="https://cdn3.vectorstock.com/i/1000x1000/86/32/realistic-empty-computer-display-with-blue-screen-vector-3618632.jpg">
                <div class="text">
                    <h1>Title</h1>
                    <a href="#">View Code</a>
                    <p>Leggings lumbersexual small batch 8-bit flannel live-edge. Single-origin coffee brunch biodiesel mlkshk, palo santo helvetica artisan affogato hammock thundercats crucifix portland squid YOLO. Lumbersexual craft beer pitchfork master cleanse,
                    asymmetrical post-ironic venmo direct trade actually poutine. Fingerstache craft beer master cleanse dreamcatcher subway tile XOXO etsy flannel adaptogen gluten-free pop-up.</p>
                </div>
            </div>
            <div class="item">
                <img src="https://cdn3.vectorstock.com/i/1000x1000/86/32/realistic-empty-computer-display-with-blue-screen-vector-3618632.jpg">
                <div class="text">
                    <h1>Title</h1>
                    <a href="#">View Code</a>
                    <p>Leggings lumbersexual small batch 8-bit flannel live-edge. Single-origin coffee brunch biodiesel mlkshk, palo santo helvetica artisan affogato hammock thundercats crucifix portland squid YOLO. Lumbersexual craft beer pitchfork master cleanse,
                    asymmetrical post-ironic venmo direct trade actually poutine. Fingerstache craft beer master cleanse dreamcatcher subway tile XOXO etsy flannel adaptogen gluten-free pop-up.</p>
                </div>
            </div>
        </div>
    </div>
</div>