css - 为什么我的 float 不会填满页面上的可用空间

Question

我正在尝试重新定位我页面上的几个元素以填充页面上未使用的空间。

float 应该能够做到这一点，但出于某种原因他们拒绝填满可用空间。

这些元素被放置在同一个直接父级中。

<div class="image-div"></div>
<h1 class="title">title</h1>
<p class="description">Description</p>
<a class="download-link">download-link</a>

并具有以下 css。

.image-div {
     float: left;
     display: inline-block;
     width: 30%;
     margin-right: 5%;
     padding: 0;
}

.title,
.description,
.download-link {
    float: right;
    display: inline-block;
    width: 65%;
    margin: 0;
    padding: 0;
}

我错过了什么吗？非常感谢您的建议。

此外，如果有其他方法可以达到相同的结果，我也很乐意听到。

我试过 position: absolute;但是当图像太高或描述不够长时，这会弄乱页面。

Answer 1

因为您错过了标题、描述和链接的类。否则它会起作用。

.image-div {
    float: left;
    display: inline-block;
    width: 30%;
    margin-right: 5%;
    padding: 0;
}

.title,
.description,
.download-link {
    float: right;
    display: inline-block;
    width: 65%;
    margin: 0;
    padding: 0;
 }

<div class="image-div"></div>
<h1 class="title">title</h1>
<p class="description">Description</p>
<a class="download-link">download-link</a>