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元素的位置和文本

回答

相關問題