如何包裹中心内容并使其占用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的剩余宽度

回答

相关问题