1

Bootstrap 2.3を使用して、2つの.gold-ratio .span6親divを作成し、それぞれにa.left-ratioと.right-ratiodivが含まれています。私の.left-ratiodivの中には画像があり、.right-ratiodivの中には画像を説明するテキストがあります。ただし、私の.left-ratiodivは親divに入力し、.right-ratiodivからのテキストはどこにも見つかりません。すべてがに設定されfloat: left、両方の子divはdisplay: inline-blockです。画像がすべてを占めている理由はよくわかりません。

JSFIDDLE

HTML：

<div class="row center">
           <ul class="thumbnails">
                <li class="span6" id="item1">
                    <div class="gold-ratio">
                        <div class="ratio-left" id="pic1">
                            <img src="img/arch/studio4_1.jpg"/>
                        </div>
                        <div class="ratio-right">
                            <h3>Some Info</h3>
                            <p>Detailed Info</p>
                        </div><!--/.ratio-right-->
                    </div><!--/.gold-ratio-->
                </li><!--/.span6-->

                <li class="gold-ratio span6" id="item2">
                    <div class="ratio-left" id="pic2">
                        <img src="img/arch/studio4_1.jpg"/>
                    </div><!--/.ratio-left-->
                    <div class="ratio-right">
                        <h3>Some Info</h3>
                        <p>Detailed Info</p>
                    </div><!--/.ratio-right-->
                </li><!--/.gold-ratio .span6-->
           </ul><!--/.thumbnails-->
    </div><!--/.row .center-->

CSS：

.gold-ratio {
    display: block;
    float: left;
    overflow: hidden;
    height: 300px;
}

.left-ratio {
    display: inline-block;
    float: left;
}

.right-ratio {
    display: inline-block;
    float: left;
    width: 200px;
}

編集：私が使用している画像はdivよりも大きいので、左側のdivをすべてのオーバーフローから切り離します。

更新されたJSFIDDLE

評判が悪いため写真を投稿できませんが、おそらくこれが役立つでしょう：

私が持っているもの：

___________________
|                 |
|                 |
|_________________|

これが私が欲しいものです：

___________________
|             |   |
|             |   |
|_____________|___|
4

1 に答える 1

1

マークアップをCSSルールにリンクするのに間違いがあります。あなたのHTMLではとを見ることができます<div class="ratio-left">が<div class="ratio-right">、あなたのスタイルシートではあなたはスタイルとをしようとしてい.left-ratioます.right-ratio。

ここでわかるように、このルールを修正すると問題が修正され、期待どおりに動作するようになります。

アップデート

問題を解決するには、フローティングがどのように機能するかをよりよく理解する必要があります。CSSの最も複雑な側面の詳細には触れずに、簡潔かつ単純に目前の問題に固執して説明しようと思います。

要素がフロートされると、要素を含む要素のfloatプロパティで指定された方向に可能な限りプッシュされます。絶対位置の要素とは異なり、フロートされた要素はドキュメントのフローの一部のままです。これは、一言で言えば、彼らが彼らのスペースを占めることを意味します。

あなたの場合、これが問題です。

固定幅（li.span6）のコンテナがあります。この要素の中には、 2つのコンテナ（と）div.golden-ratioを含む別のコンテナ（）があります。これらの最後の2つのコンテナーは、次のように設計されています（浮動要素が自動的にボックスにされるため、を取り除くことができます。おそらく、多くの頭痛の種からあなたを救うことを検討していました）。div.left-ratiodiv.right-ratiofloat:leftdisplay: inlinedisplay:inline-block

ただし、これらの最後の2つのコンテナには固定幅がないため、コンテンツの幅に関係なく使用できます。

div.left-ratioimgその内側の幅を取ります。これは制約されませんが、によって制約されmax-width: 100%ます。div.span6これは、固定幅の最後の要素であるため、100％を指します。

スペース全体を取ることにより、次の行にdiv.left-ratioプッシュdiv.right-ratioします。どこにも見つからないと言うときはdiv.golden-ratio、overflow:hiddenプロパティが設定されていて、高さが固定されているためです。overflow: hidden意味：固定された幅/高さを超えるものはすべて非表示にします。したがって、プッシュされた要素は消えています。

やりたいことを実現するには、幅の制約（ピクセル、パーセンテージなど）を指定して（またはそのコンテンツに）スペースを確保する必要があります。div.righ-ratiodiv.left-ratioこの更新された例では、それをどのように行うことができるかを示します。

…まあ…簡潔にするために…</p>

于 2013-03-10T02:33:18.827 に答える