0

サイト全体で使用できる画像付きの宣伝文句のリストを作成しています。幅が指定されておらず、非常に柔軟で、画像がなくてもさまざまなサイズの画像でも適切に機能するようにしたいと考えています。ブロックのテキストがその画像よりも長い場合、テキストが画像の下に折り返されないようにします。

私はそれが欲しいとほぼ正確にフィドルを作りました。https://jsfiddle.net/4dbgnqha/1/

問題は、上級開発者が、フロートをクリアしたり、ラップを防止したりするために、overflow:hidden を使用できないと言ったことです。理由は次のとおりです。

「オーバーフロー隠しは、指定した要素をラップするオブジェクトを生成します。そうすることで、その要素で認識される表示可能領域を制限できます。これにより、IE でクォーク モードが呼び出され、そのページの他の要素にカスケード効果があります。そしてそれらがどのように解釈されるか」

したがって、同意するかどうかに関係なく、使用できません。彼が言ったので、私はclearfixハックも使用できません：

「clearfix は before:: および after:: 要素を DOM にダンプします。この種のことがレイアウトを複雑にすることは望ましくありません。動的に追加された要素と潜在的なサードパーティ コードを扱う DOM をトラバースする場合は特にそうです」

さて、これらのハックなしでレイアウトを構築する方法を見つけようとしましたが、必要な制約 (画像またはコンテナーの幅が固定されていない) でそれを取得することができませんでした。

これがサンプルCSSです（「ハック」付き）：

.item {
    overflow: hidden;
    margin-bottom: 20px;
}

.item img {
    float:left;
    margin-right: 10px;
}

.item p {
    margin: 0;
    overflow: hidden;
}
4

1 に答える 1

1

この特定の例では、使用できますdisplay: table-row / table-cell（開発者がこれにも不満を持っていない限り）...

.item {
    margin-bottom: 20px;
    display: table;
}

.item img {
    margin-right: 10px;
    display: table-cell;
    vertical-align: top;
}

.item p {
    margin: 0;
    display: table-cell;
    vertical-align: top;
}
<div class="container">
    
    <div class="item">
        <img src="//placehold.it/100x100">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh.</p>
            
    </div>
        
    <div class="item">
        <img src="//placehold.it/150x100">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
        
    <div class="item">
        <img src="//placehold.it/100x200">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh.</p>
    </div>
        
    <div class="item">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh.</p>
    </div>
        
    <div class="item">
        <img src="//placehold.it/100x100">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh.</p>
    </div>
    
</div>

フィドルバージョン

ブラウザのサポートはかなり普遍的です - CANIUSE

于 2015-04-07T20:46:29.500 に答える