如何包裹中心内容并使其占用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;
}
答
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>
+1
从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>
答
你的问题是,离开了跨度,以便跨度下的文字显示的文本之后来到。试着用这个网站码:
<a class="container">
<span class="right"></span>
<span class="left"></span>
hello how are you
</a>
你能不能把那些左,右元素:前和:后? –
您的意思是? –