In CSS, can I line up heights of inline

In CSS, can I line up heights of inline-blocks?

I thought by setting margins to 0 and height to auto, that the block would expand to fit the available space, but it still tightly wraps around the block.

.myclass {
    display: inline-block;
    margin: 0em;
    padding: 1em;
    height: auto;
    border: solid;
}

http://jsfiddle.net/6NQDw/

I would like both boxes to be the same height, but want the div width/heights to be determined by their content, not specifying a width/height in pixels.

Is there some kind of padding/margin/alignment CSS or something like that that I can use?

---

You could use display:table-cell; if you require a pure CSS solution but do take note that it won't work in IE7 (I guess IE6 is by now completely forgotten).

.myclass {
    display: table-cell;
    margin: 0em;
    padding: 1em;
    height: auto;
    border: solid;
}

Cross browser support for display:table-cell

Your best bet for achieving what you need is JavaScript however explicitly setting width of containers with dynamic content is almost always the wrong way.

---

You can use display: table-cell; to make the boxes match each other's height.

---

If you want support for IE7, you cannot use inline-block or table-cell.

Just use float:left to be safe...

otherwise you will land up using a separate css just for IE7.

链接地址: http://www.djcxy.com/p/89254.html

上一篇: 不同的填充当div浮动与全宽时

下一篇: 在CSS中，我可以排列内联的高度吗？