DIV元素的位置和文本

我有一个关于DIV元素的问题。请在这张截图看看：DIV元素的位置和文本

这就是我想实现：

红色DIV盒具有相同的CSS类。有时会在他们和DIV“A”之间添加另一个DIV“B”。在这种情况下，红色的DIV应该更短，文本也应该缩短（文本溢出：省略号）。

请问我可以告诉红色DIV盒子如何用CSS获得正确的宽度？对于组

<div class="row"> 
<div class="left"> 
    <div class="group">Hello world!</div> 
    <div class="group">Hello again!</div> 
</div> 
<div class="middle-left"> 
    <div>B</div> 
    <div>A</div> 
</div>

CSS：

text-overflow: ellipsis; 
white-space: nowrap !important; 
width: ???????;

来源

2016-03-04 th_hh

发布您到目前为止所做的工作。所以不是免费的代码写作服务。 –

查看position：relative和float：left和float：right的工作方式。这3件事是你需要的。 – durbnpoisn

http://www.w3schools.com/css/css_intro.asp – Ageonix

您可以使用Flexbox的：

.wrapper { 
 
    display: flex; /* Magic begins */ 
 
    width: 300px; 
 
    border: 1px solid; 
 
} 
 
.a, .b, .red { 
 
    border: 1px solid; 
 
    margin: 5px; 
 
    padding: 5px; 
 
} 
 
.a, .b { 
 
    width: 80px; 
 
    display: flex; /* Magic again */ 
 
    align-items: center; /* Center content vertically */ 
 
    justify-content: center; /* Center content horizontally */ 
 
} 
 
.red-wrapper { 
 
    flex: 1; /* Occupy available space */ 
 
    min-width: 0; /* Ignore content */ 
 
} 
 
.red { 
 
    white-space: nowrap; /* Prevent line breaks */ 
 
    overflow: hidden; /* Hide overflow */ 
 
    text-overflow: ellipsis; /* Show text ellipsis */ 
 
    background: #faa; 
 
}

<div class="wrapper"> 
 
    <div class="red-wrapper"> 
 
    <div class="red">Hello world!</div> 
 
    <div class="red">Hello again!</div> 
 
    </div> 
 
    <div class="a">A</div> 
 
</div> 
 
<hr /> 
 
<div class="wrapper"> 
 
    <div class="red-wrapper"> 
 
    <div class="red">Hello world!</div> 
 
    <div class="red">Hello again!</div> 
 
    </div> 
 
    <div class="b">B</div> 
 
    <div class="a">A</div> 
 
</div>

来源

2016-03-04 21:07:31 Oriol

下面是一个简单的方法来做到这一点。

.a{ 
position:relative; 
float:left; 
height:40px; 
width:40px; 
border:1px solid; 
} 
.b{ 
position:relative; 
float:left; 
height:40px; 
width:40px; 
border:1px solid; 
} 
.c{ 
position:relative; 
float:left; 
height:80px; 
width:40px; 
border:1px solid; 
} 
.d{ 
position:relative; 
float:left; 
height:80px; 
width:40px; 
border:1px solid; 
} 

<div style="width:200px"> 
    <div style="width:40px;float:left"> 
    <div class="a"> 
    Hello a 
    </div> 
    <div class="b"> 
    Hello b 
    </div> 
    </div> 
    <div style="width:130px"> 
    <div class="c"> 
    Hello c 
    </div> 
    <div class="d"> 
    Hello d 
    </div> 
    </div> 
</div>

来源

2016-03-04 21:10:14 durbnpoisn

DIV元素的位置和文本

回答

相关问题