動態內容添加到外部容器時爲什麼內部元素寬度不會增加

Question

當我向.innerright添加動態內容時。爲什麼.a的寬度沒有動態增加。我應該怎麼做才能確保.a動態地取得寬度爲.innerright的容器。我使用JavaScript代碼動態添加內容。

var list = ''; 
 
for (var i = 0; i < 100; i++) { 
 
    list = list + i + 's'; 
 
} 
 

 
$('.innerright').append(list);

.outer { 
 
    width: 500px; 
 
    height: 200px; 
 
    background-color: red; 
 
} 
 
.innerleft { 
 
    width: 20%; 
 
    float: left; 
 
    height: 100%; 
 
    background-color: yellow; 
 
} 
 
.innerright { 
 
    width: 80%; 
 
    height: 100%; 
 
    float: left; 
 
    background-color: green; 
 
    overflow: scroll; 
 
} 
 
.a { 
 
    height: 20px; 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="outer"> 
 
    <div class='innerleft'> 
 

 
    </div> 
 
    <div class='innerright'> 
 
    <div class="a"> 
 

 
    </div> 
 
    </div> 
 
</div>

Answer 1

這是因爲你的容器元素上設置一個計算的寬度和明確告訴容器應對加入了滾動條溢出的內容。

就css而言，元素總是處於計算寬度，額外內容只是擴展到溢出區域，而不是影響容器的寬度。

我不確定這是可修復的在CSS單獨同時保持overflow屬性滾動。所有事情都是按照應有的方式進行的，元素正在採取他們應該採用的寬度，並在整個動態內容編輯過程中進行維護 - 溢出不是寬度的一部分。

您可以使用javascript scrollWidth值並使用它來動態編輯.a元素的寬度。

參見fiddle here

最重要的一點是：

$('.a').width($('.innerright')[0].scrollWidth); 

其獲取.innerright元件的滾動寬度，包括寬度和溢出，並使用該設置.a的寬度元素，現在也進入溢出區域。

當然，您需要在添加任何動態內容後調用並調用它！

注意，[0]表示獲取由JQuery調用返回的DOM節點數組中的第一個元素。

Answer 2

正如其他人指出的，塊元素不增長，他們溢出。你是CSS使得溢出滾動。爲了實現您的目標，請將內容（<a>和文本）包裝在一個內嵌塊元素中，該元素將會增長，現在您的<a>將收到它的父級（增長）寬度，並且<div>仍然具有可滾動溢出：

var list = ''; 
 
for (var i = 0; i < 100; i++) { 
 
    list = list + i + 's'; 
 
} 
 

 
$('.contentspan').append(list);

.outer { 
 
    width: 500px; 
 
    height: 200px; 
 
    background-color: red; 
 
} 
 
.innerleft { 
 
    width: 20%; 
 
    float: left; 
 
    height: 100%; 
 
    background-color: yellow; 
 
} 
 
.innerright { 
 
    width: 80%; 
 
    height: 100%; 
 
    float: left; 
 
    background-color: green; 
 
    overflow: scroll; 
 
} 
 
.a { 
 
    height: 20px; 
 
    border: 1px solid red; 
 
} 
 
.contentspan { 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="outer"> 
 
    <div class='innerleft'> 
 

 
    </div> 
 
    <div class='innerright'> 
 
    <span class='contentspan'> 
 
     <div class="a"> 
 

 
     </div> 
 
    </span> 
 
    </div> 
 
</div>

順便說一句，這無關動態內容或JS。如果文本在HTML中內聯，您會得到完全相同的結果。