中心のコンテンツをラップしてdivの残りの幅をとる方法

Question

<a>タグを持っています。これは、2つのspanタグが左右に浮いて中央にコンテンツがあります。どのようにコンテンツを自分自身を中心にするのですか？コンテンツは、スパンタグとその幅を浮動させた後、残りの幅を取る必要があります。 注：：テキストのスパンコンテナを追加できません。

HTML：

<a class="container"> 
    <span class="right"></span> 
    hello how are you 
    <span class="left"></span> 
</a> 

CSS：

.container { 
    width:200px; 
    height:200px; 
    border:1px solid; 
    display:block; 
} 
.left { 
    width:50px; 
    height:200px; 
    background:red; 
    float:left; 
} 
.right { 
    height:200px; 
    width:100px; 
    background:blue; 
    float:right; 
} 

DEMO:

Answer 1

フレキシボックスは

.container { 
 
    width: 50%; 
 
    margin: auto; 
 
    height: 200px; 
 
    border: 1px solid; 
 
    display: flex; 
 
    text-align: center; 
 
    justify-content: space-between; 
 
} 
 
.left { 
 
    width: 50px; 
 
    height: 200px; 
 
    background: red; 
 
} 
 
.right { 
 
    height: 200px; 
 
    width: 100px; 
 
    background: blue; 
 
}

<a class="container"> 
 
    <span class="right"></span> 
 
    hello how are you 
 
    <span class="left"></span> 
 
</a>

Answer 2

は、第1フローティング要素をあなたのHTMLを並べ替え、そしてテキスト：

.container { 
 
    width:200px; 
 
    height:200px; 
 
    border:1px solid; 
 
    display:block; 
 

 

 
} 
 
.left { 
 
    width:50px; 
 
    height:200px; 
 
    background:red; 
 

 
    float:left; 
 
} 
 
.right { 
 
    height:200px; 
 
    width:100px; 
 
    background:blue; 
 
    float:right; 
 

 
}

<a class="container"> 
 
    <span class="right"></span> 
 
    <span class="left"></span> 
 
    hello how are you 
 
</a>

Answer 3

あなたの問題は、スパンが、テキストの下に表示されるように、左スパンは、テキストの後に来たということです。このhtmlコードを試してみてください：beforeと：：後

<a class="container"> 
    <span class="right"></span> 
    <span class="left"></span> 
    hello how are you 
</a>