Html 如何强制内联 div 保持在同一行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15445164/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to force inline divs to stay on same line?
提问by user1219278
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):
我正在尝试以下操作（概述，下面包含 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>
fiddle: http://jsfiddle.net/5kszQ/
小提琴：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
谢谢你的帮助
采纳答案by Dinesh Gajbhiye
If you are open for some HTML changes, then this should give you exactly what you want:
如果您愿意接受一些 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>
and css to be:
和 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/Hope that helps.
jsFiddle：http: //jsfiddle.net/gajbhiye/ZX97K/希望有所帮助。
回答by Daniel Imms
Here's one method using inline-blockfor the left and middle and position:absolutefor the right element.
这是inline-block用于左侧和中间以及position:absolute右侧元素的一种方法。
HTML
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
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;
}
Since it relys on inline-block, there is a comment in between the <div>s to get rid of the spacing illustrated in this image:
由于它依赖于inline-block，因此在<div>s之间有一个注释可以消除此图中所示的间距：
text-overflow:ellipsis
文本溢出：省略号
To achieve this when using text-overflow:ellipsisyou may need to fallback on JavaScript, here is a possible solution (jsFiddle).
要在使用时实现这一点，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';
}
回答by NGLN
Fool the browser with saying that it all fits just well on a single line by adding some large margins to the center and right elements, and compensate for that with relative positioning. See updated fiddle.
通过向中心和右侧元素添加一些大的边距来愚弄浏览器，说它完全适合在一行中，并通过相对定位进行补偿。请参阅更新的小提琴。
Markup: remains intact.
标记：保持不变。
Style:
风格：
#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;
}
回答by brian
Just try this
试试这个
<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>
