0

float: leftプロパティを持つdivが新しい「行」のようなレイアウトを作成せず、実際に流動的なCSSレイアウトを作成できるかどうかを調べようとしています。

より具体的に言うと、私が今持っているものは次のとおりです。

ここに画像の説明を入力

すべてのブロックにはdiv、float: leftスタイル、特定のマージン、固定されていない高さ属性があります。ご覧のとおり、十分な高さのブロックはすべて、同じ高さの「行」または「行」を形成します。私が達成しようとしているのは、すべてのdiv要素が独自のmarginスタイルのみに従い、同様の高さの行を作成しないようにすることです。

問題は、それが可能かどうか、可能であればどのように達成できるかということです。

HTML (一部ブロック省略):

<div id="blocks_wrapper">
<div class="strblock rouded_3px infobox">
    <div class="dElement">
        <div class="d_option">Web</div>
        <div class="d_value"><a href="" rel="nofollow" target="_blank"></a></div>
    </div>
</div>
<div class="strblock rouded_3px infobox">
    <div class="dElement">
        <div class="d_option">Phone</div>
        <div class="d_value"></div>
    </div>
</div>
<div class="strblock rouded_3px infobox">
    <div class="dElement">
        <div class="d_option">Thu—Fri</div>
        <div class="d_value">11:00—19:00</div>
    </div>
</div>
<div class="strblock rouded_3px infobox">
    <div class="dElement">
        <div class="d_option">Pricing</div>
        <div class="d_value">40 USD</div>
    </div>
</div>
<div class="strblock rouded_3px infobox">
    <div class="dElement">
        <div class="d_option">Address</div>
        <div class="d_value">0.2km from Historic U.S. 66, Seligman, AZ 86337, USA</div>
    </div>
</div>
<div class="strblock rouded_3px infobox">
    <div class="dElement">
        <div class="d_option">Coordinates</div>
        <div class="d_value">
            35.52890, -113.23200<br>
            N35°31'44", W113°13'55"
        </div>
    </div>
</div>

<div class="clear"></div>
</div>

CSS :

#blocks_wrapper .strblock { float: left; margin-bottom: 3px; overflow: hidden; }
#blocks_wrapper .infobox { width: 19%; padding: 3px; }
#blocks_wrapper .infobox .dElement .d_option { display: inline-block; width: 90px; overflow: hidden; font-weight: bold; }
#blocks_wrapper .infobox .dElement .d_value { display: inline-block; width: 155px; vertical-align: top; }
4

1 に答える 1

2

遅いことはわかっていますが、これは誰かを助けるかもしれません。 http://masonry.desandro.com

于 2013-11-06T22:36:30.847 に答える