Question

我需要并排强制2个div，如下例所示：

#colwrap{
    overflow:hidden;
    background-color: orange;
    width:300px;
}
#colLeft {
  height: 48px;  
  white-space: nowrap;    
  overflow: hidden;
  text-overflow: ellipsis;
}
#colRight {
  background-color: #c3d0ff;
  height: 48px;
  float: right;
}


//This is cool
<div id="colwrap">
    <div id="colRight">icon1, icon2</div>
    <div id="colLeft">Really long long long name of file.txt</div>  
</div>

<br>

//But this is wrong : 

<div id="colwrap">
    <div id="colRight">icon1, icon2</div>
    <div id="colLeft">Short name of file.txt</div>  
</div>

//It should look like this, when text is shorter :

<div id="colwrap">
    <div id="colLeft" style="float:left;">Short name of file.txt</div> 
    <div id="colRight" style="float:left">icon1, icon2</div> 
</div>

小提琴：https://jsfiddle.net/2jno80ba/

！div包含文件名，文件的每一端都必须是多个图标的容器，当文本较大时，容器就固定在最后。1

Answer 1

将div的宽度设置为自动#colleft{width:auto;} https://jsfiddle.net/3v5jtcck/3/

Answer 2

你可以使用flex-box来实现这一目标。检查这支笔： http://codepen.io/anon/pen/aOExbb

我刚刚修改了你的css：

#colwrap{
  overflow:hidden;
  background-color: orange;
  width:300px;
  display:flex;
  flex-flow:row;
  justify-content:flex-start;
}
#colLeft {
  height: 48px;  
  white-space: nowrap;    
  overflow: hidden;
  text-overflow: ellipsis;
}
#colRight {
  order:2;
  background-color: #c3d0ff;
  height: 48px;
  float: right;
}

这是一个guide to flex-box

CSS如何强制DIV并排文本溢出？

2 个答案: