html - cssで同じ行に2つの見出しを付ける方法は?

Question

このフィドル 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>

このフィドルでは、左枠とフロート要素の間の中央ではなく、中央のテキストをページの中央に配置したいと考えています。

Answer 1

position: absolute; right: 10px;以下は、id4divに追加することによって可能なオプションの 1 つです。これにより、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;
}

Answer 2

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

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

デモ