이미지를 텍스트 아래쪽에 플로팅

Question

플로팅 이미지와 측면 텍스트가 포함 된 div가 있습니다. 이미지가 왼쪽으로 플로팅 된 경우 텍스트의 오른쪽이 옆으로, 이미지가 오른쪽으로 플로트 된 경우 텍스트가 왼쪽으로 배치됩니다. 모든 것을 잘 표시하려면 텍스트 앞에 img 요소를 넣고 CSS에 + 선택기를 사용하여 텍스트에 적절한 여백을 지정하십시오 (아래 코드 참조).

작은 화면의 경우 이미지를 텍스트 아래에 배치하여 텍스트 및 이미지를 블록 (100 % 너비)으로 표시하고 싶습니다. 나는 절대 위치 지정을 here 제안대로 사용하려고 시도했지만 작동하지 않습니다. 이미지는 항상 위에 표시됩니다. 내 목표를 어떻게 달성 할 수 있습니까? 미리 감사드립니다.

HTML

<div class="wrapper"> 
    <img class="sectionimage left" src="image.jpg" /> 
    <div class="sectiontext"> <p>Some text.</p> </div> 
</div> 

CSS

.wrapper { 
    overflow:hidden; 
} 

.sectionimage { /* must always be before text, even if floated right */ 
    vertical-align:bottom; 
    max-width:400px; 
} 

.left { 
    float:left; 
} 

.right { 
    float:right; 
} 

.left + .sectiontext { 
    margin-left:500px; /* left margin for text after a "left" image */ 
} 

.right + .sectiontext { 
    margin-right:500px; /* right margin for text after a "right" image */ 
} 

/* images and text displayed as blocks */ 
@media only screen and (max-width:950px) 
{ 
    .sectionimage, .sectiontext { 
     display:block; 
     width:100%; 
    } 

    .sectionimage { 
     float:none; 
    } 

    .sectiontext { 
     margin:0px !important; 
    } 
} 

JSFiddle Here

Answer 1

겠습니까 당신을 위해 아래 작업?

Example Fiddle

HTML

<div class="wrapper"> 
    <div class="sectiontext left"> 
     <p>Some text.</p> 
    </div> 
    <img class="sectionimage" src="image.jpg" /> 
</div> 

CSS

.wrapper { 
    overflow:hidden; 
} 
.sectionimage { 
    /* must always be before text, even if floated right */ 
    vertical-align:bottom; 
    max-width:400px; 
    display:inline-block; 
} 
.left { 
    float:left; 
} 
.right { 
    float:right; 
} 
.left { 
    margin-right:500px; 
} 
.right { 
    margin-left:500px; 
} 
/* images and text displayed as blocks */ 
@media only screen and (max-width:950px) { 
    .sectionimage, .sectiontext { 
     display:block; 
     width:100%; 
    } 
    .sectionimage { 
     float:none; 
    } 
    .sectiontext { 
     margin:0px !important; 
    } 
} 

Answer 2

내가 찾은 또 다른 방법은, 그것은 좋은 대안이 될 수 있기를 바랍니다.

HTML

<div class="wrapper"> 
    <div class="sectiontext right"> 
     <p>Some text.</p> 
    </div> 
    <img class="sectionimage" src="image.jpg" /> 
</div> 

CSS

.wrapper { 
    overflow:hidden; 
} 

.sectionimage { 
    max-width:300px; 
} 

.left { 
    float:left; 
    display:inline-block; 
    width:calc(100% - 350px); 
} 

.right { 
    float:right; 
    display:inline-block; 
    width:calc(100% - 350px); 
} 

/* text displayed as block */ 
@media only screen and (max-width:500px) 
{ 
    .sectiontext,.sectionimage { 
     width:100%; 
    } 
} 

다음은 working fiddle입니다. 누군가가 도움이되기를 바랍니다.