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