Question

我正在使用angularjs和bootstrap的软件。

我需要<divs class="well">具有相同的高度，但它们有恐怖信息，所以我无法知道高度。我用flex发现了这个例子：

http://www.bootply.com/126437

但它对我不起作用。

这是我的tpl.html代码：

<div id="salesdashboard">
        <div class="row row-flex row-flex-wrap">
            <div class="col-xs-12 col-md-6">
                <div class="well highthreecolumn">
                <div><h4>TOP 10 ART&Iacute;CULOS - Anual</h4></div>                
                <table class="table">                        
                    <tbody>
                        <tr ng-repeat="entry in tablatop10articulos">
                            <td class="stretch" colspan="2">{{entry.CONCEPTO}}</td>                               
                            <td class="tdright tdlightblue stretch">{{entry.FCT_DESCUENTO | number}}€</td>
                        </tr>                                                       
                    </tbody>
                </table>
            </div>
            </div>
             <div class="col-xs-12 col-md-6">
                <div class="well highthreecolumn">
                <div><h4>BOTTOM 10 ART&iacute;CULOS - Anual</h4></div>                     
                <table class="table">                        
                    <tbody>
                        <tr  ng-repeat="entry in tablabottom10articulos">
                            <td  class="stretch" colspan="2">{{entry.CONCEPTO}}</td>                               
                            <td class="tdright tdlightblue stretch">{{entry.FCT_DESCUENTO | number}}€</td>
                        </tr>                                                       
                    </tbody>
                </table>
            </div>
            </div> 
     </div>
</div>

这是css代码：

    div#salesdashboard {
        color: #a6a6a6;
        background-color: #292929; 
        /* background-color: rgb(51, 51, 51); */

    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
      position: relative;
      min-height: 1px;
      padding-left: 2px;
      padding-right: 2px;
    }

    .bgcolorgrey {
     background-color: rgb(51, 51, 51); 
     outline: 3px solid #808080;
    }

    .tdlightblue {
        color: #538dd5;
    }

    .tdsweetblue {
      color: #b7dee8;
    }

    .tdlightgreen {
        color: #5c863d;
    }

    .tdgrayyear {
        color: #808076;
    }

    .tdright {
        text-align: right !important;
    }

    button {
            appearance:none;
            -webkit-appearance:none;
            margin:0;
            border:0;
            width: 40px;
            height:40px;
            box-sizing:border-box;
            background: #4f81bd;
            color: white;
            font-weight:bold;
            font-size:20px;
             outline: none;
            &:active {
                box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.25);

           }
        }

    .table th, .table td {
        border-top: 0px  !important;
    }

    td.stretch {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }

    .table tbody+tbody {
        border-top: 0px;
    }

    small {
        font-size: 80%;
    }

    .table > thead > tr > th,
    .table > tbody > tr > th,
    .table > tfoot > tr > th,
    .table > thead > tr > td,
    .table > tbody > tr > td,
    .table > tfoot > tr > td {
      padding: 5px;
    }

    .well {
        background-color: #3e3e3e; 
        padding: 19px;
        margin-bottom: 5px;
        border: 1px solid #3e3e3e;
        /*-webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;*/
        /*-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
        -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
        box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);*/
      }

      .highonecolumn {
        min-height: 260px;
      }

      .hightwocolumn {
        min-height: 315px;
      }

       .highthreecolumn {
        min-height: 240px;
        height: 100%;
      } 

     .row-flex, .row-flex {  
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
        display: flex;
        flex:1 1 auto;
    }

        .row-flex-wrap {
          -webkit-flex-flow: row wrap;
            align-content: flex-start;


 flex:0;
    }

    .row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {
       margin:-.2px; /* hack adjust for wrapping */
    }

    .container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {
      width:100%;
    }


    .flex-col {
        display: flex;
        display: -webkit-flex;
        flex: 1 100%;
      flex-flow: column nowrap;
    }

    .flex-grow {
      display: flex;
        -webkit-flex: 2;
        flex: 2;
    }

    }

提前致谢。

相同的div高度与Flex无法正常工作

0 个答案: