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/

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

enter image description here

我希望：

enter image description here

感谢您的帮助

Answer 1

以下是一种方法，左侧和中间使用inline-block，右侧元素使用position:absolute。

Example

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>之间会有一条评论来摆脱此图片中所示的间距：

Ugly spacing

文本溢出：省略号

要在使用text-overflow:ellipsis时实现此目的，您可能需要回退JavaScript，这是一个可能的解决方案（jsFiddle）。

Ellipsis using JavaScript

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/希望有所帮助。

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

Answer 4

使用百分比 - 如果只考虑百分比，可以保持干净的布局。如果页面上有足够的空间，浮动或内联块将永远不会进入下一行。

外部元件的宽度为20％，中间部分的宽度为50％。这相当于页面的90％，因此不会溢出。如果这是你想要的，你可以更精确地填充页面，但你必须注意填充和可能搞砸你的布局的边距。

这是一个fidde：https://jsfiddle.net/VVarPiglet/Lsy2rquk/

<div class="parent">
<div class="subParenet">
<div class="left outer inlineBlock">
    <img class="image" src="http://alexoliveira.me/Hawaii/images/chevron- left.png" />
</div>
<div class="middle inlineBlock"></div>
<div class="right outer inlineBlock">
  img class="image" src="http://alexoliveira.me/Hawaii/images/chevron-left.png" />
</div>
</div>
</div>

CSS

.inlineBlock{
  display: inline-block;
}
.middle{
  background: blue;
  width: 50%;
  height: 215px;
}
.image{
  width:100%;
}
.outer{
  background: red;
  width: 20%;
}
.subparent{
  display: inline-block;
  width:100%;
}

Answer 5

试试这个

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

Answer 6

只需将子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>

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

6 个答案:

文本溢出：省略号