Question

我有3个相同的班级divs和divs高度值是自动的，我怎样才能将相同的班级div高度设置为更高的div高度？ Same Class Div

提前致谢。

Answer 1

你可以使用flexbox：

一个非常有用的在线工具：http://the-echoplex.net/flexyboxes/

例如：

＆＃13;

.flex-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.flex-item {
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    background: gray;
    margin: 5px;
}

＆＃13;

<div class="flex-container">
    <div class="flex-item">
        Test <br />
    </div>
    <div class="flex-item">
        Test <br />Test <br />Test <br />
    </div>
    <div class="flex-item">
        Test <br />Test <br />Test <br />Test <br />Test <br />
    </div>
</div>

＆＃13;

Answer 2

您可以在容器上使用css flex。我在下面写一个例子。

CSS

proc http
url="the name of the web"
method="POST"
IDCLIENT="MY ID CLIENT"
IDPASSWORD="MY ID PASSWORD"

run;

HTML

.box{
  background: #000;
  color: white;
  margin: 15px;
  box-sizing: border-box;
}

.box-container{
  width:100%;
  height: auto;
  display: flex;
}

Answer 3

添加包装行。

HTML

$this->company()->branch

CSS

      <div class="row">
      <div class="checklist">
        <table> <!-- asp controls:CheckListBox -->
          <tr>
            <td>item1</td>
          </tr>
          <tr>
            <td>item2</td>
          </tr>
        </table>
      </div>

      <div class="checklist">
        <table> <!-- asp controls:CheckListBox -->
          <tr>
            <td>item1</td>
          </tr>
          <tr>
            <td>item2</td>
          </tr><tr>
            <td>item1</td>
          </tr>
          <tr>
            <td>item2</td>
          </tr><tr>
            <td>item1</td>
          </tr>
          <tr>
            <td>item2</td>
          </tr><tr>
            <td>item1</td>
          </tr>
          <tr>
            <td>item2</td>
          </tr>
        </table>
      </div>

      <div class="checklist">
        <table> <!-- asp controls:CheckListBox -->
          <tr>
            <td>item1</td>
          </tr>
          <tr>
            <td>item2</td>
          </tr><tr>
            <td>item1</td>
          </tr>
          <tr>
            <td>item2</td>
          </tr><tr>
            <td>item1</td>
          </tr>
          <tr>
            <td>item2</td>
          </tr><tr>
            <td>item1</td>
          </tr>
          <tr>
            <td>item2</td>
          </tr>
          <tr>
            <td>item2</td>
          </tr><tr>
            <td>item1</td>
          </tr>
          <tr>
            <td>item2</td>
          </tr>
        </table>
      </div>
      </div>

Answer 4

您可以非常轻松地使用jQuery执行此操作。

Algorithm 1.设置复选框元素的高度 2.获取具有最多复选框元素的div 3.通过将最多复选框元素与复选框元素高度相乘来设置所有清单元素的高度。

jQuery( document ).ready( function() {
    var mostChecklist,
        checklists = [ ],
        checkboxHeight = '30'; // you can modify this value

    // Get all checklist length
    JQuery('.checklist')
    .each( function( i, checklist ) {
        // Get all input checkbox in checklist
        checklists.push( 
            jQuery( checklist ).children('input:checkbox').length 
        );
    });

    // Get max number in checklists array
    mostChecklist = checklists.reduce(
        function( a, b ) {
            return Math.max( a, b );
        }
    );

    // Set the height of all checklist elements
    jQuery('.checklist').css( 'height', checkboxHeight * mostChecklist +'px' );
});

Answer 5

您可以使用

显示：挠曲

为Modern Browsers中的容器

和旧版浏览器中的兼容性，例如Internet Explorer，您可以使用

显示：表细胞

每个div中的

如何将相同的DIV类高度设置为最高div高度

5 个答案: