html - 我将如何设置此布局？

Question

我正在尝试将此布局放在一起...

...但是中间部分有问题。

左侧部分(带有 MP3 图标)始终 左对齐并且宽度固定为 72px...右侧部分(带有 READY 文本)是 < strong>总是右对齐但是但它的宽度可能会变化，即它不是固定的。

我希望中间部分向左对齐并跨越左右部分之间的宽度而不与右侧部分重叠。因此，如果文本太长，它会换行到第二行，而不是重叠或将右侧部分向下推。

这是我目前的基本结构......

<div id="files">
    <div class="file">
        <div class="file-icon"></div>
        <div class="file-status">
            <span class="file-status-text">READY 100%</span>
        </div>
        <div class="file-info">
            <div class="file-name">
                <span class="file-name-text"></span>
            </div>
        </div>
    </div>
</div>

我怎样才能得到这个布局？随意修改我的 HTML 结构……这就是我目前所拥有的，没有什么是一成不变的。

Answer 1

这需要对您的行为进行大量样式设置，并且需要 float 大量元素。目前很忙，但会为您准备好。向左浮动和向右浮动，并确保那些

<Music icon + info>
 <Music icon img>
  <info>
<read>
 <readytext>

这是我的伪代码。