如何强制内联 div 保持在同一行？答案

【问题标题】：How to force inline divs to stay on same line?如何强制内联 div 保持在同一行？
【发布时间】：2013-03-04 22:05:44
【问题描述】：

我正在尝试制作三列布局。我希望左右列的宽度仅与其子内容一样宽。我想扩大中心列以填充剩余空间。

我正在尝试以下（概述，下面包含 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/

但是当它的内容太长时，中心列将右列推到它下面。我希望所有三列都内联，并根据需要缩小中心列。这就是上面给我的：

相反，我想：

感谢您的帮助

【问题讨论】：

我认为如果你使用 Javascipt 会很容易。
是任何固定宽度
没有一个宽度是固定的。
你必须设置每个 div 的最大宽度。删除空格 attr 然后添加 word-break:break-all;

标签： html css word-wrap

【解决方案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';
}

【讨论】：

要修复行内块元素之间的空白，可以将父容器中的字体大小设置为0，然后在子容器中重新声明所需的字体大小:)
有几种不同的解决方法，老实说，我认为它们都很糟糕：P
使用这种方法，然后在 colCenter 上使用“text-overflow: ellipsis”是行不通的，对吧？如果我理解正确，colCenter 的一部分在 z 顺序中位于 colRight 下方，对吗？谢谢
是的。在这种情况下使用 inline-block 的问题是内容容器（在这种情况下是三个）是并且仅与其内容一样宽 - 因此当视口变得太窄时宽度不会正确折叠：溢出，除非设置了最小宽度，否则 text-overflow 将无济于事，这必须进行一些计算。我可以想到一个 JS + CSS 组合解决方案，但不是纯 CSS 解决方案。

【解决方案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/ 希望对您有所帮助。

【讨论】：

为什么要放置“#”而不是点“.”？
@DaniSpringer.com "#" 是 css selector 的 id，而 "."是类选择器
为什么要使用一个而不是另一个？
id 用于定位特定元素，而 class 可用于定位一组元素
ID 只能在页面上使用一次，而可以在整个网页中使用 class 来定位您想要相同样式的多个元素。

【解决方案3】：

通过向中心和右侧元素添加一些较大的边距来欺骗浏览器，说它完全适合单行，并通过相对定位进行补偿。请参阅 updated fiddle。

标记：保持不变。

风格：

#parent {
  background-color: #eee;
  height: 48px;
  overflow: hidden;
}
#colLeft {
  background-color: #ff8b8b;
  height: 48px;
  float: left;
}
#colCenter {
  background-color: orange;
  height: 48px;
  float: left;
  margin-left: -2000px;
  position: relative;
  left: 2000px;
}
#colRight {
  background-color: #c3d0ff;
  height: 48px;
  float: right;
  margin-right: -2000px;
  position: relative;
  left: -2000px;
}

【讨论】：

我喜欢这个解决方案。此外，如果右列的宽度恒定，有一个很好的方法可以使中间列的溢出变得更好：添加左填充并在 colRight 的背景中放置一个很快从完全透明变为完全不透明的渐变。 jsfiddle.net/a52fm2am/1

【解决方案4】：

试试这个

<html>
<head>
    <style type="text/css">
        #parent {
          word-break:break-all;
        }
        #colLeft {
          float:left;
          max-width: 5%;
        }
        #colCenter {
          float:left;
          max-width: 90%;
        }
        #colRight {
          float: right;
          max-width: 5%;
        }
    </style>
</head>
<body>
    <div id="parent" style="width:100%">
      <div id="colLeft">leftawefawefawefawef</div>
      <div id="colCenter">Some really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjl</div>
      <div id="colRight">rightaewfaewfawefawef</div>
    </div>
</body>

【讨论】：

【解决方案5】：

只需将子 div 放入表格单元格中，而将表格放入父 div 中。不需要任何样式

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

【讨论】：

请记住问题年龄是“7 岁以上”；从而提供适用于您的解决方案的版本控制。审查结束。