佈局將不會根據div大小進行伸展

我正在學習一些angularjs，並且正在構建一個小型項目。它主要連接到一個數據庫並加載一個表到網站，每一行代表一個項目（假設...）。佈局將不會根據div大小進行伸展

我正在做angularjs，加載一個數組，將其編碼爲JSON並呈現它，但 - 似乎DIV被切斷，只顯示第一行並添加滾動條。

我希望DIV根據我展示的元素數量進行拉伸。

的這部分代碼如下所示：

<div id="topContainer" ng-controller="projectController"> 
     <h3>{{ projectsNum }} Live projects</h3> 
     <div id="proj" ng-repeat="project in projects"> 
      <project-information info="project"></project-information> 
     </div> 
    </div>

而CSS：

#topContainer { 
    overflow: auto; 
} 

#proj { 
    position: relative; 
    margin: 10px; 
    float: left; 
    width: 200px; 
}

來源

2015-08-15 Nadav Peled

請創建問題的演示，而不是發佈動態代碼。 –

我在我的電腦上的本地服務器上運行它，這是一個屏幕截圖：http://i.imgur.com/8ekZyxe.jpg 對不起，「風格」只是着色它，所以我可以注意到... –

複製在瀏覽器中生成的HTML並將其發佈到此處。使用Firebug或ChromeDevTools並右鍵單擊元素。 –

表佈局解決方案

給父容器table佈局和子項table-cell 。給父母給予100%寬度。

#topContainer { 
 
    overflow: auto; 
 
} 
 
.container { 
 
    display: table; 
 
    width: 100%; 
 
} 
 
#proj { 
 
    position: relative; 
 
    margin: 10px; 
 
    display: table-cell; 
 
}

<div id="topContainer" ng-controller="projectController"> 
 
    <h3>8 Live projects</h3> 
 
    <div class="container"> 
 
    <div id="proj" ng-repeat="project in projects"> 
 
     First 
 
    </div> 
 
    <div id="proj" ng-repeat="project in projects"> 
 
     Second 
 
    </div> 
 
    <div id="proj" ng-repeat="project in projects"> 
 
     Third 
 
    </div> 
 
    <div id="proj" ng-repeat="project in projects"> 
 
     Fourth 
 
    </div> 
 
    <div id="proj" ng-repeat="project in projects"> 
 
     Fifth 
 
    </div> 
 
    <div id="proj" ng-repeat="project in projects"> 
 
     Sixth 
 
    </div> 
 
    <div id="proj" ng-repeat="project in projects"> 
 
     Seventh 
 
    </div> 
 
    <div id="proj" ng-repeat="project in projects"> 
 
     Eighth 
 
    </div> 
 
    </div> 
 
</div>

Flexbox的佈局解決方案

裹在一個獨立的容器中的項目，並使用Flexbox Layout Module。檢查Browser compatibility table爲Flexbox的

#topContainer { 
 
    overflow: auto; 
 
} 
 
#proj { 
 
    position: relative; 
 
    margin: 10px; 
 
    flex: 1; /* Grow and Shrink according to the parent */ 
 
} 
 
.container { 
 
    display: flex; 
 
}

<div id="topContainer" ng-controller="projectController"> 
 
    <h3>8 Live projects</h3> 
 
    <div class="container"> 
 
    <div id="proj" ng-repeat="project in projects"> 
 
     First 
 
    </div> 
 
    <div id="proj" ng-repeat="project in projects"> 
 
     Second 
 
    </div> 
 
    <div id="proj" ng-repeat="project in projects"> 
 
     Third 
 
    </div> 
 
    <div id="proj" ng-repeat="project in projects"> 
 
     Fourth 
 
    </div> 
 
    <div id="proj" ng-repeat="project in projects"> 
 
     Fifth 
 
    </div><div id="proj" ng-repeat="project in projects"> 
 
     Sixth 
 
    </div> 
 
    <div id="proj" ng-repeat="project in projects"> 
 
     Seventh 
 
    </div> 
 
    <div id="proj" ng-repeat="project in projects"> 
 
     Eighth 
 
    </div> 
 
    </div> 
 
</div>

來源

2015-08-15 21:32:47

佈局將不會根據div大小進行伸展

回答

相關問題