如何强制内联div保持同一条线？

Question

我正在尝试制作三列布局.我希望左右列的宽度只与子项内容一样宽.我希望中心列扩展以填充剩余空间.

我正在尝试以下(概述,包括下面的jsfiddle链接):

#colLeft {
  display: inline;
  float: left;
}
#colCenter {
  float: left;
  display: inline;
  overflow: none;
  white-space: nowrap;
}
#colRight {
  display: inline;
  float: right;
}

<div id="parent" style="width:100%">
  <div id="colLeft">left</div>
  <div id="colCenter">Some really long text in the center. Some really long text in the center.</div>
  <div id="colRight">right</div>
</div>

小提琴:http: //jsfiddle.net/5kszQ/

但是当其内容太长时,中间列会推动其下方的右列.我希望所有三列都是内联的,并根据需要缩小中心列.这就是上面给我的:

相反,我想:

谢谢你的帮助

Answer 1

这是使用inline-block左侧和中间以及position:absolute右侧元素的一种方法.

的jsfiddle

HTML

<div id="parent" style="width:100%">
    <div id="colLeft">left</div><!--
    --><div id="colCenter">Some really long text in the center. Some really long text in the center.</div>
    <div id="colRight">right</div>
</div>

CSS

html, body {
    margin: 0px;
    padding: 0px;
}
#parent {
    background-color: #eee;
    height: 48px;
    position:relative;
    overflow:hidden;
    white-space: nowrap;
}
#colLeft {
    background-color: #ff8b8b;
    height: 48px;
    display: inline-block;
}
#colCenter {
    background-color: orange;
    height: 48px;
    display: inline-block;
    overflow: hidden;
}
#colRight {
    background-color: #c3d0ff;
    height: 48px;
    display: inline;
    float: right;
    position:absolute;
    top:0;
    right:0;
}

由于它依赖inline-block,在<div>s 之间有一个注释,以摆脱此图像中所示的间距:

文本溢出:省略号

要在使用时实现这一点,text-overflow:ellipsis您可能需要回退JavaScript,这是一个可能的解决方案(jsFiddle).

window.onresize = updateDimensions;

function updateDimensions() {
    var parent = document.getElementById('parent');
    var left = document.getElementById('colLeft');
    var right = document.getElementById('colRight');
    var middle = document.getElementById('colCenter');

    middle.style.width = (parent.offsetWidth - right.offsetWidth - left.offsetWidth)  + 'px';
}

Answer 2

如果你打开一些HTML更改,那么这应该给你你想要的东西:

<div id="parent" style="width:100%">  
  <div id="colLeft">left</div>
  <div id="colwrap">
      <div id="colRight">right</div>
      <div id="colCenter">Some really long text in the center. Some really long text in the center.</div>  
    </div>
</div>

和css是:

html, body {
  margin: 0px;
  padding: 0px;
}
#parent {
  background-color: #eee;
  height: 48px;
}
#colLeft {
  background-color: #ff8b8b;
  height: 48px;
  float: left;
}
#colwrap{
    overflow:hidden;
    background-color: orange;      
}
#colCenter {
  height: 48px;  
}
#colRight {
  background-color: #c3d0ff;
  height: 48px;
  float: right;
}

jsFiddle:http://jsfiddle.net/gajbhiye/ZX97K/希望有所帮助.