两列div，100％宽度？

Question

我的网站上有一系列按钮，我想要100％宽度，右边有一个固定的列，左边有一个灵活的列。

我首先想到的是如何使用液体页面布局，只需在div而不是整个页面上使用它。我的结果如下：

此图像是显示页面时发生的图像，以便链接可以放在框中。

如果页面按比例缩小，我希望右列（在70px处设置）填充整个高度并水平对齐文本。

我目前用于生成那些结果的代码是：

<li class="manage-files-list">
<div class="container">
<a class="right" target="_blank" href="">view</a>
<div class="left">
<a href="../reallylongfilelink.html"></a> 
</div>
</div>
</li>

和

li.manage-files-list {
width: 100%;
display: table;
background-color:rgba(0,0,0,.05);
}

.container{
border-bottom:1px solid white;
color:#666;
text-shadow: 0 1px 0 #fff;
}

.left {
margin-right:70px;
word-break: break-all;
height:100%;
border-right:1px solid #fff;
}

.right {
width: 70px;
float: right;
text-align: center;
background-color:#333;
display:inline-table !important;
vertical-align: middle;
height:100%;
}

我能想到的唯一其他要求是它需要包含在<li>标记中，但我不明白为什么会出现问题。

Answer 1

由于看起来你可以使用display: table*;值，所以这里有jsFiddle显示使用它的解决方案。

它将.left和.right设置为显示表格单元格，停止float .right并将其移动为第二个元素。问题是您的浮动导致浏览器忽略height和display属性，只是将其视为浮动块。

此外，请确保您知道，使用display: table*;的这些解决方案是compatible IE8+

Answer 2

虽然我不建议使用.left和.right作为类名，但解决方案实际上只需要为{{1}设置overflow: hidden和word-wrap: break-word }} .left。

<div>

预览：http://jsfiddle.net/Wexcode/HzpJu/