如何强制内联div保持在同一行？ [英] How to force inline divs to stay on same line?

问题描述

我试图做一个三列布局。我想要左右列的宽度只有和他们的孩子的内容一样宽。

我想尝试以下（概述，jsfiddle链接包括在下面）：

  #colLeft {
 display：inline; 
 float：left; 
} 
 #colCenter {
 float：left; 
 display：inline; 
 overflow：none; 
 white-space：nowrap; 
} 
 #colRight {
 display：inline; 
 float：right; 
} 
 
< div id =parentstyle =width：100％> 
< div id =colLeft>左< / div> 
< div id =colCenter>中间有一些很长的文字。一些真正的长文本在中心。< / div> 
< div id =colRight> right< / div> 
< / div> 
  

fiddle：
希望有所帮助。

I'm trying to make a three-column layout. I'd like the width of the left and right columns to be only as wide as their children content. I'd like the center column to expand to fill the remaining space.

I'm trying the following (overview, jsfiddle link included below):

#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>

fiddle: http://jsfiddle.net/5kszQ/

but the center column pushes the right column below it when its content is too long. I'd like all three columns to be inline, and have the center column shrink as necessary. This is what the above is giving me:

instead I would like:

Thanks for any help

解决方案

If you are open for some HTML changes, then this should give you exactly what you want:

<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>

and css to be:

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/ Hope that helps.

这篇关于如何强制内联div保持在同一行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！