html - 我想要 2 个 Div 或表格单元格 float 在每个旁边，一个显示 : inline and the other to fill rest of the row

Question

我想要的:

我的成就:

我将两个 DIV 标签 float 在一起(我也尝试过使用表格)。我希望 HR 行填充标题未使用的其余水平空间。

我不想使用固定宽度或 % 宽度。

我已经尝试了大多数我所知道的表格单元格。我可以描述我想要的属性的最佳方式类似于显示:内联标题，所以它会停止全宽，但表格会环绕它以留下 HR 表格单元格来填充行的其余部分。

这是一些代码:最初没有附加，因为只有表格没有太多内容，删除了不相关的位

 .certificatetitle { font-weight: 100; font-size: 16px; }

 .collapsed .line {  height: 40px;  }
 .line { height: 40px;   }
 .line hr { color: #f69f1a; background-color: #f69f1a; border-color: #f69f1a; height: 1px; }


<table class="certificatebar" height="40px">
    <tr>
        <td class="certicon" width="30px"></td><td class="certificatetitle">Microsoft Office</td><td class="line"><hr /></td><td class="dropdown" width="20"></td>
    </tr>
</table>

Answer 1

您可以完全使用单个元素来完成此操作，使其保持语义纯净(更不用说将来易于维护)。

http://cssdeck.com/labs/kw3ivdam

<h1>Microsoft Office</h1>

h1 {
    /* add "door" logo image as background here */
    position: relative;
    overflow: hidden;
}

h1:before { /* element holding your carrot image */
    position: absolute;
    display: inline-block;
    content: ' ';
    right: 0;
    top: 50%;
    margin-top: -15px; /* half of your height */
    width: 30px; /* width of bg image */
    height: 30px; /* height of bg image */
    background: url(http://placehold.it/30x30) no-repeat white;
}

h1:after { /* element creating your `hr` effect */
    display: inline-block;
    content: " ";
    border-bottom: 1px solid goldenrod;
    width: 100%;
    margin-right: -50%;
    vertical-align: middle;
}