浮动左div不占用所有宽度

Question

我有以下代码片段，我希望侧文本div放置在图像的右侧，但除非我指定使用此侧文本div，将自动移动到底部（因为它是现在）

我试图显示与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并删除display: inline-block;从.side-text：

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高度被放大到图像高度。 Here is a great tutorial关于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>