html - 如何让两个标题与 css 在同一行？

Question

看到这个 fiddle JSFiddle

CSS:

.containers {
width:100%;
height:auto;
padding:10px;
margin-bottom:0px;
}

#id4 {
float:right;
margin-right:0;
display:inline;
    border:5px solid red;
}

#id5 {
text-align:center;
    border:5px solid red;
}

HTML:

<div class='containers'>
<div id='id4'>
margin-right:10px;
</div>
<div id='id5'>
    center-text;
</div>

在这个 fiddle 中，我希望中心文本位于页面的中心，而不是位于左边框和 float 元素之间的中心。

Answer 1

下面是一个可能的选项，通过添加 position: absolute; right: 10px; 到 id4 div。这将使 div 始终保持在距右边距 10px 的位置。但需要注意的是，该元素不再是float元素。

注意:如果结果窗口缩小到一定程度，文本会重叠。如果我设法找到解决办法，我会更新答案。

.containers {
    width: 100%;
    height: auto;
    padding: 10px;
    margin-bottom: 0px;
    text-align: center;
    box-sizing: border-box;
}
#id4 {
    display: inline-block;
    position: absolute;
    right: 10px;
    border: 5px solid red;
}
#id5 {
    display: inline-block;
    border: 5px solid red;
}