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

g6baxovj 于 2023-10-21 发布在其他

关注(0)|答案(6)|浏览(165)

我想做一个三栏的版面。我想左列和右列的宽度仅与其子内容一样宽。我想把中间的柱子扩大一些，填满剩下的空间。
我正在尝试以下方法（概述，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/
但当内容太长时，中间列会将右列推到其下方。我想所有三列内联，并有必要收缩中心列。这就是上面给我的：

相反，我想：

谢谢你的帮助

css

来源：https://stackoverflow.com/questions/15445164/how-to-force-inline-divs-to-stay-on-same-line

6条答案

按热度按时间

3j86kqsm1#

这里有一个方法，使用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：省略号

为了在使用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）回复(0）举报 2023-10-21

ux6nzvsh2#

如果你是开放的一些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/希望对您有所帮助。

赞(0）回复(0）举报 2023-10-21

hl0ma9xz3#

欺骗浏览器说，这一切都适合在一个单一的行添加一些大的利润率的中心和权利的元素，并补偿与相对定位。参见**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;
}

赞(0）回复(0）举报 2023-10-21

dffbzjpn4#

结合DIV的设置：display、float和position，我已经在一行上创建了三个子DIV。
父DIV：display：inlin-block前两个子DIV：float：left; Right child DIV：float：right;显示：内联;位置：绝对;

.parent {
           width:100%;
            margin: 0 auto 10;
            clear:both; 
            margin-top:3px;
            display:inline-block;
            padding: 0.5em 0 0.5em 0;
        }
        .colLeft {
          float: left; 
          margin: 5px auto;
        }
        .colCenter {
          float:left; 
         position:relative;
          width:85%;
          margin: 5px auto 5px 5px;
        }
        .colRight {
           float: right;            
           display: inline; 
           position:absolute;
           margin-left: 2px;
        }

<body>
    <div class="parent">
      <div class="colLeft">[0002]</div>
      <div class="colCenter">Very long text. Input the paragraph which describes the technical field here.Input the paragraph which describes the technical field here.Input the paragraph which describes the technical field here.Input the paragraph which describes the technical field here.Input the paragraph which describes the technical field here.Input the paragraph which describes the technical field here.</div>
      <div class="colRight"><b>*Note:123</b></div>
    </div>
    </body>

赞(0）回复(0）举报 2023-10-21

kr98yfug5#

就试试这个

#parent {
  word-break: break-all;
}

#colLeft {
  float: left;
  max-width: 5%;
}

#colCenter {
  float: left;
  max-width: 90%;
}

#colRight {
  float: right;
  max-width: 5%;
}

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

赞(0）回复(0）举报 2023-10-21

oyt4ldly6#

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

赞(0）回复(0）举报 2023-10-21

我来回答

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

6条答案

text-overflow：省略号

相关问题

热门标签

最新问答