Question

我有这个小提琴： 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不要换行到新行，而是需要缩小或增加宽度作为“中心”列，并且其中的文本应该换行。感谢名单。

Answer 1

这是你正在寻找的吗？

.middlePart {
  width : calc(100% - 306px);
  float: left;
  border : 1px solid green;
}

Answer 2

最后我明白了，你想得到什么（至少，我希望）：

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

fiddle

CSS 3列布局，包含2个固定列和1个主中心列

2 个答案: