Question

我正在将网站从固定宽度设计转换为Flexbox布局。大部分网站我都能很好地运作。但是，有一个页面我需要在javascript中创建一系列DIVS作为AJAX例程的一部分 - 内容是动态加载的。

我遇到的问题是在javascript中创建的DIVS无法正常运行Flexbox父级。他们确实正确包装，我可以通过CSS添加填充/样式等，但我不能让它们的大小工作。我需要在每一行上设置两个框，并将它们设置为40％，但它完全忽略了CSS，并且只将框填充到它放入的内容的宽度加上我在CSS中指定的任何填充。 / p>

Flexbox CSS：

.contentholder {
    margin:0;      
      padding:10px 10px 10px 10px;
     background:#FFFFFF;
    border:1px dotted #ed0bea;
    border-radius:5px;
    text-align:left;        
    -webkit-display: box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;  
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content:space-between;
    -moz-justify-content:space-between;
    -ms-justify-content:space-between;
    justify-content:space-between;  
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;} 

  .contentholder {
    -webkit-box-flex: 1 1 40%;
        -webkit-flex: 1 1 40%;
        -moz-flex: 1 1 40%;
        -ms-flex: 1 1 40%;
        flex: 1 1 40%;}

以下是我用来创建DIVS和内容的javascript部分的示例：

var placeholderDiv = document.getElementById('placeholderbox');
        //CREATE CONTENT HOLDER BOX
        var divRHolder = document.createElement('div');
        divRHolder.className = "contentholder";
        placeholderDiv.appendChild(divRHolder);
        //CREATE RESULT INFO DIV
        var divRInfo = document.createElement('div');
        divRInfo.className = "resultinfo";
        divRInfo.innerHTML = 'Some text in here';
        divRHolder.appendChild(divRInfo);

如果有人能给我任何提示，我将不胜感激。感谢。

更新：就html而言，我有一个Flexbox包装器，其中包含标题，导航栏，内容和页脚等。除此页面上的内容外，其他所有内容都正确显示。

在内容部分中，我为结果添加了持有者div。这与带有DIV ID的javascript相关联：

<div id="placeholderbox"></div>
    <div id="placeholderboxa"></div>    
<div id="placeholderboxb"></div> etc etc etc

CSS Flexbox和javascript DIV大小调整

0 个答案: