在一個內部填充兩個動態div

-1

我在一個父div內部有兩個div。我想要正確的div總是堅持正確的，並擴大到左側，如果內容更長; 我想要左邊的div來填充剩餘部分（內容將被隱藏）在一個內部填充兩個動態div

我已經完成了研究，但在所有類似的問題中，一個div具有固定寬度，而在我的情況下，兩者都是動態的（一個基於內容，另一個基於另一個div）。

我可以使用JavaScript來動態改變左div的寬度，但是有沒有一種純粹的CSS方式來實現呢？

更新1：我們需要支持舊瀏覽器，所以我不能使用flexbox。

更新2：我需要的另一件事是，左div的內容應該只有一行，並隱藏溢出。所以如果我使用white-space: nowrap; overflow: hidden; text-overflow: ellipsis，左邊的div超出了長度，右邊的div不會顯示。

來源

2016-08-13 DrXCheng

我能想到的一種方法是在子div上使用display: table-cell。請注意，即使右側div沒有固定寬度，其內容也必須如此，所以右側div可以展開，左側div可以佔用剩餘空間。

.parent { 
 
    width: 500px; 
 
    margin-bottom: 10px; 
 
} 
 
.child { 
 
    display: table-cell; 
 
    width: 100%; 
 
    height: 100px; 
 
} 
 
.left { 
 
    background-color: rgba(255,0,0,.1); 
 
} 
 
.right { 
 
    background-color: rgba(0,255,0,.1); 
 
} 
 

 
.parent:nth-child(2) .child.right p { 
 
    width: 200px; 
 
} 
 
.parent:nth-child(3) .child.right p { 
 
    width: 350px; 
 
}

<div class="parent"> 
 
    <div class="child left"> 
 
    a 
 
    </div> 
 
    <div class="child right"> 
 
    b 
 
    </div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="child left"> 
 
    a 
 
    </div> 
 
    <div class="child right"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
    </div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="child left"> 
 
    a 
 
    </div> 
 
    <div class="child right"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="child left"> 
 
    right div content doesn't have a width 
 
    </div> 
 
    <div class="child right"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
</div>

來源

2016-08-13 00:35:39 akinuri

問題是，我無法給出一個寬度 – DrXCheng

@DrXCheng那麼，什麼是正確的div的內容呢？這種或那種方式，內容必須有一個寬度。 – akinuri

它肯定有一個寬度，但我不能在css中定義。 – DrXCheng

使得第一個孩子的div浮動：權，寬度：汽車，並與保證金權的第二個孩子的div：汽車，應該做的伎倆：

<div> 
<div style="float:right;width:auto;border:1px solid;white-space: nowrap;">Something Something Something Something </div> 
<div style="margin-right:auto;border:1px solid;">Something Something Something </div> 
</div>

來源

2016-08-13 01:36:50 gus

它不工作。 – DrXCheng

我想正確的div總是堅持正確的，並擴大到左側，如果內容更長;我想要左邊的div來填充剩餘的部分（內容將被隱藏）。

我相信flexbox可以解決這個問題。

.wrapper { 
 
    width: 80%; 
 
    display: flex; 
 
    margin: 1em auto; 
 
    border: 1px solid grey; 
 
    justify-content: space-between; 
 
    background: red; 
 
} 
 
.left, 
 
.right { 
 
    flex: 1 1 auto; 
 
    padding: 1em; 
 
} 
 
.left { 
 
    background: pink; 
 
} 
 
.right { 
 
    flex: 0 1 auto; 
 
    background: #c0ffee; 
 
}

<div class="wrapper"> 
 
    <div class="left"></div> 
 
    <div class="right">Lorem ipsum dolor sit.</div> 
 
</div> 
 

 
<div class="wrapper"> 
 
    <div class="left"></div> 
 
    <div class="right">Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum iusto consectetur aut explicabo, aliquam illo nihil magnam, reiciendis animi quidem provident nulla porro sed cumque!</div> 
 
</div>

來源

2016-08-13 09:49:53

我相信如此。但不幸的是，我們需要支持舊瀏覽器，所以我不能使用flexbox。 – DrXCheng

在一個內部填充兩個動態div

回答

相關問題