我该如何设置这个布局？

Question

我正在尝试整理这个布局......

...但我遇到了中间部分的问题。

左侧部分（带有MP3图标）始终左对齐，固定宽度为72px ...右侧部分（带有READY文本）始终右对齐但，但其宽度可能会有所不同，即不已修复。

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

这是我迄今为止的基本结构......

<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

这需要在你的行为上有很多样式，并且需要浮动许多元素。目前正忙着，但会为你操纵它。向左浮动并向右浮动并确保那些

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

这是我的伪代码。

Answer 2

我明白了。这是一个小提琴：

以下是代码：

HTML

<div class="file">
    <div class="file-icon"></div>
    <div class="file-status">
        <span class="file-status-text"></span>
    </div>
    <div class="file-info">
        <div class="file-name">
            <span class="file-name-text"></span>
        </div>
        <div class="file-size">
            <span class="file-size-text"></span>
        </div>
    </div>
</div>

CSS

.file {
    border-top: 1px solid #c4c4c4;
    border-bottom: 1px solid #c4c4c4;
    height: 100px;
    margin-top: -1px;
    position: relative;
    z-index: 100;
}
.file-icon {
    height: 100%;
    width: 72px;
    margin: 0px 16px;
    float: left;
}

.file-status {
    height: 100%;
    min-width: 72px;
    margin: 0px 16px;
    float: right;
    text-align: center;
}

.file-status-text {
    font-size: 24px;
    color: #666666;
    line-height: 100px;
}

.file-info {
    position: relative;
}

.file-name {
    position: relative;
    overflow: hidden;
    margin-top: 36px;
}

.file-name-text {
    font-size: 24px;
    color: #666666;
    line-height: 32px;
}

.file-size {
    position: relative;
    overflow: hidden;
}

.file-size-text {
    font-size: 12px;
    color: #727272;
    position: relative;
}