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

时间:2017-02-03 08:39:14

标签: css

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

2 个答案:

答案 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;
  }

fiddle