0

私が解決しようとしている問題を実証するためのフィドルがあります：

http://jsfiddle.net/JordashTalon/DgP7J/11/

最初の行でわかるように、3 番目の列は右に配置されています (一番左の列がそのすぐ右の列よりも高いため)。

私はクリアを行うかどうかを知っています：両方。2 番目の列の後、最後の列を左端までフロートさせますが、よりレスポンシブなデザインをしようとしているので、クリアせずにそれを行うことが最善です (コンテナが十分に大きくなった場合はクリアするのではなく、列を残りの列と同じ高さにする必要があります)。

この問題を解決する方法を知っている人はいますか？それが理にかなっているといいのですが。

4

1 に答える 1

0

ここで解決策を見つけることができます：http：//blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

<style>
.column {
    width: 200px;
    min-height: 250px;
    border: 1px solid #000;
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    margin: 5px;
    zoom: 1;
    *display: inline;
    _height: 250px;
}


<div class="column">
    <div>
        <h4>This is awesome</h4>
        <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg"
        alt="lobster" width="75" height="75"/>
    </div>

于 2012-10-14T03:28:21.630 に答える