使用CSS表但将基于像素的宽度分配给表格单元格

Question

我试图在CSS中创建一种表格。

我的目标是在这种情况下有两个部分，品牌和顶部栏的其余部分。

我想要做的是将其拆分为2个主要部分，因此我将在左侧跨越100px的品牌徽标，然后将剩余的空间分配给导航。在导航中，我将它分成两个列表，一个可以向左浮动，另一个向右浮动。

但是，我努力让品牌部分的宽度为100px，同时display: table-cell;

我附上了当前工作的小提琴。

您会看到品牌部分目前跨越整个宽度，而不是所需的100px

请注意，品牌右侧的部分需要是浏览器的剩余宽度。为了直观地显示这个，我在下面有一个截图。

白色部分中的所有内容都是1个div，横跨深灰色品牌区域右侧的整个宽度，我不认为我可以使用display: inline-block;执行此操作，因为它不会占用剩下的空间。

任何人都可以进一步指导我。

http://jsfiddle.net/jyosndj3/1/

Answer 1

与往常一样，只有一种方法可以给猫皮肤涂抹。就像我在上面的评论中提到的那样，我个人并不知道我会采取表格方法。这是您可以做到的众多方法之一：

http://jsfiddle.net/jyosndj3/2/

CSS：

.topbar {
width: 100%;
height: 30px;
background-color: #777;
overflow: hidden;
}

.logo {
float: left;
width: 100px;
height: 30px;
background-color: #111;
}

.left {
float: left;
width: 50%;
margin-right: -50px;
padding-right: -50px;
height: 30px;
background-color: #f00;
}

.right {
float: left;
width: 50%;
margin-right: -50px;
padding-right: -50px;
height: 30px;
background-color: #00f;
}

HTML：

<div class="topbar">
    <div class="topbar-contents">
        <div class="logo">
Logo
        </div>
        <div class="left">
Left
        </div>
        <div class="right">
Right
        </div>
    </div>
</div>

坦率地说，我不会在制作中使用这个确切的代码，因为它只是一个概念的快速证明，但希望它至少可以让你在思考方面更多地使用你的方法。