Question

我在angularjs素材中有以下html：

angular.module('MyApp', ['ngMaterial']);

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css" rel="stylesheet"/>
    <body ng-app="MyApp" ng-cloak>
    
      <div layout="row" style="border: 5px solid red;">
        <div layout="column" style="border: 5px solid purple;">
          <div layout="row" style="border: 5px solid orange;">
            <div layout="column" flex="50" style="border: 5px solid yellow;">
              <md-content>
                LoremipsumdolorsitametnequodnovummeiSeaomniuminveniremediocrematinobortisconclusionemquenamNedelenitiappeterereprimiqueproinanilabiturdisputationitesedAtvixsaleomnesqueidprolabiturreformidansaccommodarecumlaboreshonestatiseuNecquemlucilasdasdsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaausineamraesentreformidansnoSedlaudemaliquamneaslkjaofiuhfsodbfsdlofdsoilisfdhbfdasofsdodsafhfsdlfsdfsdlkfdshldasfhlfasdkfsdlfdshfsldkhfdlfdksahfdlkfdshlsfdhkfdlfdsahfsdlkhfsdlfskdhlfsdkhfsdlkfhdslfdskhflkdslkhsafdhfslkdlsfhkd.
              </md-content>
            </div>
            <div layout="column" flex="50" style="border: 5px solid green;">
              Contact
            </div>
          </div>
        </div>
      </div>
      <br>
      <div layout="column" style="border: 5px solid purple;">
        <div layout="row" style="border: 5px solid orange;">
          <div layout="column" flex="50" style="border: 5px solid yellow;">
            <md-content>
              LoremipsumdolorsitametnequodnovummeiSeaomniuminveniremediocrematinobortisconclusionemquenamNedelenitiappeterereprimiqueproinanilabiturdisputationitesedAtvixsaleomnesqueidprolabiturreformidansaccommodarecumlaboreshonestatiseuNecquemlucilasdasdsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaausineamraesentreformidansnoSedlaudemaliquamneaslkjaofiuhfsodbfsdlofdsoilisfdhbfdasofsdodsafhfsdlfsdfsdlkfdshldasfhlfasdkfsdlfdshfsldkhfdlfd
            </md-content>
          </div>
          <div layout="column" flex="50" style="border: 5px solid green;">
            Contact
          </div>
        </div>
      </div>
    </body>
</html>

情况说明：

有两个块，第一个包含我的问题，第二个可以正常工作

第一个进入行>列>行>列（50％）|栏（50％）

和第二个不包含第一行的

列>行>列（50％）|栏（50％）

每个示例中50％的第一列包含一个很长的单词。

问题：

在第一个块中，多余的行似乎以一种不再适用50/50规则的方式来操纵布局，因为该块没有被减半，而是完整的单词显示在前50％列中，而在第二个块工作正常，并巧妙地应用了50/50规则，并在内部md-content（或div）中显示了滚动条。

问题：

为什么会这样？
如何使第一个块的行为与第二个块的行为一样？

Answer 1

尝试将.flex-100 / flex="100"添加到第1行的容器列中。

其中的.row无法在未定义宽度的情况下找到它的宽度，因此默认为内容宽度。

angular.module('MyApp', ['ngMaterial']);

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css" rel="stylesheet"/>
    <body ng-app="MyApp" ng-cloak>
    
      <div layout="row" style="border: 5px solid red;">
        <div layout="column" flex="100" style="border: 5px solid purple;">
          <div layout="row" style="border: 5px solid orange;">
            <div layout="column" flex="50" style="border: 5px solid yellow;">
              <md-content>
                LoremipsumdolorsitametnequodnovummeiSeaomniuminveniremediocrematinobortisconclusionemquenamNedelenitiappeterereprimiqueproinanilabiturdisputationitesedAtvixsaleomnesqueidprolabiturreformidansaccommodarecumlaboreshonestatiseuNecquemlucilasdasdsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaausineamraesentreformidansnoSedlaudemaliquamneaslkjaofiuhfsodbfsdlofdsoilisfdhbfdasofsdodsafhfsdlfsdfsdlkfdshldasfhlfasdkfsdlfdshfsldkhfdlfdksahfdlkfdshlsfdhkfdlfdsahfsdlkhfsdlfskdhlfsdkhfsdlkfhdslfdskhflkdslkhsafdhfslkdlsfhkd.
              </md-content>
            </div>
            <div layout="column" flex="50" style="border: 5px solid green;">
              Contact
            </div>
          </div>
        </div>
      </div>
      <br>
      <div layout="column" style="border: 5px solid purple;">
        <div layout="row" style="border: 5px solid orange;">
          <div layout="column" flex="50" style="border: 5px solid yellow;">
            <md-content>
              LoremipsumdolorsitametnequodnovummeiSeaomniuminveniremediocrematinobortisconclusionemquenamNedelenitiappeterereprimiqueproinanilabiturdisputationitesedAtvixsaleomnesqueidprolabiturreformidansaccommodarecumlaboreshonestatiseuNecquemlucilasdasdsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaausineamraesentreformidansnoSedlaudemaliquamneaslkjaofiuhfsodbfsdlofdsoilisfdhbfdasofsdodsafhfsdlfsdfsdlkfdshldasfhlfasdkfsdlfdshfsldkhfdlfd
            </md-content>
          </div>
          <div layout="column" flex="50" style="border: 5px solid green;">
            Contact
          </div>
        </div>
      </div>
    </body>
</html>

angularjs的材料额外的行和长字创建错误的布局

1 个答案: