我有这个小提琴: https://jsfiddle.net/fgzgeg68/1/
使用以下代码HTML:
<div class="testContainter">
<div class="leftPart">
Short Fixed width Text
</div>
<div class="middlePart">
The long text here should responsivley wrap within this div, and not wrap the div itself onto a new line.
</div>
<div class="rightPart">
Short Fixed width Text
</div>
</div>
和CSS:
.testContainter
{
position: relative;
}
.leftPart {
width : 150px;
float: left;
border : 1px solid red;
}
.middlePart {
float: left;
border : 1px solid green;
}
.rightPart {
width : 150px;
float: right;
border : 1px solid blue;
}
我想要实现的是中心div不要换行到新行,而是需要缩小或增加宽度作为“中心”列,并且其中的文本应该换行。 感谢名单。
答案 0 :(得分:1)
这是你正在寻找的吗?
.middlePart {
width : calc(100% - 306px);
float: left;
border : 1px solid green;
}
答案 1 :(得分:0)
最后我明白了,你想得到什么(至少,我希望):
.testContainter {
position: relative;
height: 100%;
width: 100%;
text-align: center;
}
.leftPart {
width : 150px;
float: left;
border : 1px solid red;
}
.middlePart {
display:inline-block;
border : 1px solid green;
max-width: 700px;
}
.rightPart {
width : 150px;
float: right;
border : 1px solid blue;
}