如何包裹中心內容並使其佔用div的剩餘寬度

我有一個<a>標記，其中有兩個span標記浮動，左側和右側以及中間的內容。我如何將內容自行包裝到中心？浮動span標籤及其寬度後，內容應占用剩餘寬度。 注意：：我無法爲文本添加span容器。如何包裹中心內容並使其佔用div的剩餘寬度

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:

來源

2016-07-26 Pbk1303

你能不能把那些左，右元素：前和：後？ –

您的意思是？ –

Flexbox，就可以做到這一點

.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>

來源

2016-07-26 14:59:42

從OP的代碼中遺留下來......刪除了thx。 –

重新安排你的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>

來源

2016-07-26 14:57:56 LinkinTED

你的問題是，離開了跨度，以便跨度下的文字顯示的文本之後來到。試着用這個網站碼：

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

來源

2016-07-26 14:59:21

如何包裹中心內容並使其佔用div的剩餘寬度

回答

相關問題