对齐和孩子的DIV

我遇到了一些HTML CSS &我的一些（理解）的问题。

我在父DIV（.group）中有多个DIV（.item）。这些孩子DIV的高度取决于他们的动态内容。

HTML：

<div class="group"> 
    <div class="item"> 
     <div class="item-title">item 1</div> 
     <div class="item-tag">tag1</div> 
    </div> 
    <div class="item"> 
     <div class="item-title">item 2</div> 
     <div class="item-tag">tag1</div> 
     <div class="item-tag">tag2</div> 
     <div class="item-tag">tag3</div> 
     <div class="item-tag">tag4</div> 
    </div> 
    <div class="item"> 
     <div class="item-title">item 3</div> 
     <div class="item-tag">tag1</div> 
     <div class="item-tag">tag2</div> 
    </div> 
</div> 
<div class="group"> 
    <div class="item"> 
     <div class="item-title">item 1</div> 
     <div class="item-tag">tag1</div> 
     <div class="item-tag">tag2</div> 
     <div class="item-tag">tag3</div> 
     <div class="item-tag">tag4</div> 
    </div> 
    <div class="item"> 
     <div class="item-title">item 2</div> 
     <div class="item-tag">tag1</div> 
     <div class="item-tag">tag2</div> 
    </div> 
    <div class="item"> 
     <div class="item-title">item 3</div> 
     <div class="item-tag">tag1</div> 
    </div> 
</div>

CSS：

.group { 
    margin: 30px; 
    padding: 10px; 
    border: 1px dashed black; 
} 

.item { 
    display: inline-block; 
    border: 1px solid black; 
    width: 100px; 
    margin-right: 10px; 
} 

.item-title { 
    text-align: center; 
    font-style: italic; 
    font-weight: bold; 
}

我想实现的是一组内的所有项目的DIV应该有相同的高度，应该在顶部对齐。这使我想起了几个问题：

对准
我该如何调整所有项目的DIV在组的顶部？现在他们都在底部对齐，你可以看到的例子...
高度
正如我在它看来，这不能用纯HTML完成的其它问题，已经看到了/ CSS。因此我决定使用一个带JQuery的JS来纠正元素的高度。
工作例如：http://jsfiddle.net/YfDWL/1/

的JavaScript：

$(window).load(function() { 
    "use strict"; 

    var maxHeight; 

    // Iterate through every group 
    $('.group').each(function(idx, group) { 
     maxHeight = 0; 

     // Iterate through every item of the group and save the max height 
     $(group).find('.item').each(function(idx, item) { 
      var height = $(item).height(); 

      if (!maxHeight || (height > maxHeight)) { 
       maxHeight = height; 
      } 
     }); 

     // Set the max height to all items inside the group 
     if (maxHeight) { 
      $(group).find('.item').css('height', maxHeight); 
     } 
    }); 
});

正如你所看到的，这是工作正常，但仍然对准一个问题...

我'现在想知道的是物品的排列来自哪里，以及我如何设法将所有物品放在组顶部？

此外，我很乐意在这里的建议，如果“同样的高度” - 问题可以解决更有说服力，也许没有JS ... ...

感谢&问候，
MIK

来源

2012-12-04 suamikim

添加vertical-align:top

.item { 
    display: inline-block; 
    border: 1px solid black; 
    width: 100px; 
    margin-right: 10px; 
    vertical-align:top 
}

DEMO

你可以参考这个example知道如何得到同等的高度，而无需使用JS。

DEMO 2

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

来源

2012-12-04 09:41:53 Sowmya

添加vertical-align:top;您.item类

.item{ 
vertical-align:top; 
}

Demo

Demo two

来源

2012-12-04 09:40:37

对齐和孩子的DIV

回答

相关问题