Div不維護另一個div中的最小寬度，HTML

我有三類div容器。一個是外部容器，寬度：1200px，內部div行，每個內部div都有一個所需的大小280 px。我的問題是，當我使用DOM創建元素時，CountriesInnerDiv元素的大小會根據它們內部的大小而變化。Div不維護另一個div中的最小寬度，HTML

這是我到目前爲止有：

.CountriesOuterDiv1{ 
    width: 1200px;  
    } 


    .CountriesInnerDiv{ 
    min-width:280px;  
    display:inline; 
    border:1px solid black; 
    } 


    .RowDiv { 
    width:100%; 
    } 

Here is the relevant Javascript: 

function AddTable() { 

var TableDiv = document.getElementById("CountriesOuterDiv"); 

var i,j; 
var NumCountries = 5; 
var NumSectors = 5; 



for (i = 0; i < NumCountries; i++) { 
var RowDiv = document.createElement("div") 
RowDiv.className = "RowDiv"; 
RowDiv.id = "Row"+i; 


for (j = 0; j < NumSectors + 1; j++) { 
var CountryData = document.createElement("div"); 
var SectorString = String(i+1)+"_"+String(j); 
CountryData.className = "CountriesInnerDiv"; 
CountryData.id = "CountryData"+SectorString; 

if (!((i ==0 && j == 0) || (i==0 && j ==1))) { 
    CountryData.style.display = "none"; 
    } 




if (j == 0 || (i == 0 && j == 1)) { 




var CountryDataSelect = document.createElement("select"); 
var AddButton = document.createElement("button"); 
AddButton.id = "AddButton" + SectorString; 
AddButton.innerHTML = "+"; 
if (j != 0) {  
AddButton.setAttribute('onclick','AddOrDeleteDiv("add", "' + SectorString + '");'); 
} 
else { 
if (i != NumCountries - 1) {  
AddButton.setAttribute('onclick','AddCountry("' + SectorString + '")');  
} 
if (i != 0) { 
var DeleteCountry = document.createElement("button"); 
DeleteCountry.id = "DeleteButton" + SectorString; 
DeleteCountry.innerHTML = "-"; 
DeleteCountry.setAttribute('onclick', 'DeleteCountry("' + SectorString + '")'); 

} 

} 



CountryData.appendChild(CountryDataSelect); 
    if (i != NumCountries - 1) { 
CountryData.appendChild(AddButton); 
    } 
if (i!=0) { 
    CountryData.appendChild(DeleteCountry); 
} 
RowDiv.appendChild(CountryData); 
} 


else if (j == NumSectors) { 


var CountryDataSelect = document.createElement("select"); 


var DeleteButton = document.createElement("button"); 
DeleteButton.id = "DeleteButton" + SectorString; 
DeleteButton.innerHTML = "-"; 
DeleteButton.setAttribute('onclick','AddOrDeleteDiv("delete", "' + SectorString + '");'); 
CountryData.appendChild(CountryDataSelect); 

CountryData.appendChild(DeleteButton);  


} 


else { 


var CountryDataSelect = document.createElement("select"); 

var AddButton = document.createElement("button"); 
var ADString = "add"; 
AddButton.setAttribute('onclick','AddOrDeleteDiv("add", "' + SectorString + '");'); 
AddButton.id = "AddButton" + SectorString; 
AddButton.innerHTML = "+";  
var DeleteButton = document.createElement("button"); 
DeleteButton.id = "DeleteButton" + SectorString; 
DeleteButton.innerHTML = "-";  
DeleteButton.setAttribute('onclick','AddOrDeleteDiv("delete", "' + SectorString + '");'); 
CountryData.appendChild(CountryDataSelect); 
CountryData.appendChild(AddButton); 
CountryData.appendChild(DeleteButton);  

} 
RowDiv.appendChild(CountryData); 
TableDiv.appendChild(RowDiv); 
}//End of inner for  




}//End of outer for  


}//end of function

來源

2016-08-08 IntegrateThis

顯示html適用於。 CSS本身基本上是無用的。 –

使小提琴，並顯示渲染的問題 – Mojtaba

編輯：添加了Javascript。 – IntegrateThis

其COSE你做這個div顯示：內聯;像這樣做.CountriesInnerDiv{ min-width:280px; display:inline-block; border:1px solid black; }

來源

2016-08-08 15:42:26

解決了我的問題，謝謝 – IntegrateThis

你能說這是爲什麼嗎？ – IntegrateThis

cose內聯元素具有基於內部內容的寬度。對於塊和行內塊元素，您可以通過css添加寬度 –

基本上，你正在經歷的是，最有可能的是內部元素太小，以至於當窗口很小時適合父窗口的最小尺寸......好吧，我們可以'噸有內部比外部更大的......除非你使用

overflow: scroll;

這將使父元素滾動的，所以你可以通過滾動可視化的孩子......

或...

.parent{min-width: 280px}

這將使父母具有相同的最小寬度...

來源

2016-08-08 15:44:07

我很抱歉錯過了 –

Div不維護另一個div中的最小寬度，HTML

回答

相關問題