浮動小数点divはすべての幅を占めていません

Question

私はサイドテキストdivを画像の右側に配置したいと思っていますが、このサイドテキストdivのwithを指定しない限り、

display:inline-blockで要素を表示しようとしましたが、サイドテキストのdivが画像の下部に揃えられました。

https://jsfiddle.net/f0jheskv/

.content { 
 
    width: 800px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
.text { 
 
    padding: 10px; 
 
    background-color: rgb(150, 150, 150) 
 
} 
 
.code { 
 
    padding: 10px; 
 
    background-color: rgb(200, 200, 200) 
 
} 
 
.side-text { 
 
    background-color: rgb(200, 100, 100) 
 
} 
 
.img-strip { 
 
    width: 100% 
 
} 
 
.img-strip img, 
 
.img-strip div { 
 
    float: left 
 
} 
 
.clear { 
 
    clear: both 
 
}

<div class="content"> 
 
    <h3> 
 
    Title 
 
    </h3> 
 

 
    <div class="text"> 
 
    Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó 
 
    una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. 
 
    </div> 
 

 
    <div class="img-strip"> 
 
    <img width="320px" height="240px" /> 
 
    <div class="side-text">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido 
 
     usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen.</div> 
 
    </div> 
 
    <div class="clear"></div> 
 

 
    <div class="code"> 
 
    <pre> 
 
    for(int i=0; i<9; i++){ 
 
    a=0; 
 
    b=3; 
 
    } 
 
    </pre> 
 
    </div> 
 
</div>

Answer 1

フロートだけの画像ではなく、.img-strip divと.side-textからdisplay: inline-block;を削除：

jsFiddle example

たり、それらを配置するdisplay: table-cellを使用します。

を

.img-strip img, 
.img-strip div { 
    display: table-cell; 
    vertical-align: top; 
} 

.img-strip { 
    display: table; 
} 

jsFiddle example

Answer 2

あなたは所望の幅にあなたのdivを設定し、.img-stripコンテナ上display:flex;を使用することができます。このように、divの高さは画像の高さに拡大されます。 flexプロパティについてはHere is a great tutorialです。

.content { 
 
    width: 800px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
.text { 
 
    padding: 10px; 
 
    background-color: rgb(150, 150, 150); 
 
} 
 
.code { 
 
    padding: 10px; 
 
    background-color: rgb(200, 200, 200); 
 
} 
 
.side-text { 
 
    background-color: rgb(200, 100, 100); 
 
    float: right; 
 
    flex: 1; 
 
} 
 
.img-strip { 
 
    width: 100%; 
 
    display: flex; 
 
} 
 
.img-strip img { 
 
    float: left; 
 
} 
 
.clear { 
 
    clear: both; 
 
}

<div class="content"> 
 
    <h3> 
 
    Title 
 
    </h3> 
 

 
    <div class="text"> 
 
    Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó 
 
    una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. 
 
    </div> 
 

 
    <div class="img-strip"> 
 
    <img width="320px" height="240px" /> 
 
    <div class="side-text">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido 
 
     usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen.</div> 
 
    </div> 
 
    <div class="clear"></div> 
 

 
    <div class="code"> 
 
    <pre> 
 
    for(int i=0; i<9; i++){ 
 
    a=0; 
 
    b=3; 
 
    } 
 
    </pre> 
 
    </div> 
 
</div>