CSS如何强制DIV并排与文本溢出？ [英] CSS How to force DIVs side by side with text overflow?

问题描述

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

I need force 2 divs side by side as it below in example :

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

fiddle： https://jsfiddle.net/2jno80ba/

！有div包含文件的名称，在文件的每一端必须是container多个图标，当文字较大时，容器会固定在末尾。 1

!There is div contains name of file, on every end of file must be container for multiple icons, when text is larger, then container is fixed on end.1

推荐答案

您可以使用flex-box来实现这一点。
检查此笔：
http://codepen.io/anon/pen/ aOExbb

you can use flex-box to achieve this. check this pen out: 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;
}

，这里是指向flex-box

这篇关于CSS如何强制DIV并排与文本溢出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！