Question

我有三类div容器。一个是外部容器宽度：1200px，内部div行，每个行都有一个带有内部div的内部div 所需尺寸为280像素。我的问题是，当我创建元素时使用DOM，CountriesInnerDiv元素的大小取决于它们内部的内容。

这是我到目前为止所拥有的：

 .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

Answer 1

你制作这个div显示的内容：inline;这样做.CountriesInnerDiv{ min-width:280px; display:inline-block; border:1px solid black; }

Answer 2

基本上，您经历的内容很可能是内部元素太大而且尺寸最小，以便在窗口很小时适合父元素......好吧......我们可以＆除了使用

之外，内部大于外部......

overflow: scroll;

这将使父元素可滚动，以便您可以通过滚动来显示孩子...

...或

.parent{min-width: 280px}

将使父母具有相同的最小宽度...

不在另一个div内部维持min-width，HTML

2 个答案: