浮动左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

您可以将div设置为所需的宽度，然后使用display:flex; 在.img-strip容器上。 这样，div高度将放大到图像高度。 这是有关flex属性的精彩教程 。

 .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> 

Answer 2

仅浮动图像，而不浮动.img-strip div并删除display: inline-block; 来自.side-text ：

jsFiddle示例

或使用display: table-cell定位它们：

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

.img-strip {
  display: table;
}

jsFiddle示例