CSS 플로트 고정 및 동일한 행의 유체

Question

좋아요. 가변 폭의 이미지와 가변 폭의 텍스트 문자열 2 개가 있습니다.

두 개의 인라인 컨텐츠 스팬이 해당 열에 머물고 싶습니다. 그러나 필자가 생각해 낸 해결책은 효과가 없었습니다.

<div class="fluid-container"> 
    <img class="fixed-width" src="x.png"> 

    <p class="dynamic-width"> 
    <span class="inline-content">Some&nbsp;content</span> 
    <span class="inline-content-2">Some&nbsp;content</span> 
    </p> 
</div> 

Answer 1

Google 검색 및 해킹으로 많은 시간을 보냈지만 모든 주요 브라우저에서 작동하는 솔루션을 발견했습니다. 나는이 솔루션 http://www.dynamicdrive.com/style/layouts/ 검토 한

.fillout-container 
    input.left type="button" value="Filter reviews" 
    .fillout 
    input type="text" placeholder="Start typing" 

.scss

body { 
    max-width: 480px; 
    margin: 40px auto; 
    box-sizing: border-box; 
    background: #efefef; 
} 

// Fillout technique 
.left { 
    float:left; 
} 

.fillout-container { 
    padding: 20px; 
    background: #fff; 
    box-sizing: border-box; 
    width: 100%; 
    overflow: hidden; 

    .fillout { 
    display: block; 
    box-sizing: border-box; 
    overflow: hidden; 
    padding-left: 10px; 

    > input, > div { 
     width: 100%; 
     box-sizing: border-box; 
    } 
    } 
} 

Answer 2

왼쪽 이미지를 떠서 약간의 여백을 둡니다. 이렇게하면 왼쪽의 이미지가 수정되고 p는 오른쪽으로 이동합니다.