kann man das nicht so lösen?
einfache Demo:
HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font: 100%/1.5 sans-serif;
padding: 1em;
}
figure {
border: 1px solid #cdc0b0;
border-radius: 4px;
padding: 10px;
margin-bottom: 15px;
}
img {
float: left;
margin-right: 10px;
}
.cf:after {
content: " ";
display: table;
clear: both;
}
@media only screen and (max-width: 450px) {
figure {
text-align: center;
}
img {
float: none;
margin: 0;
/*width: 100%;*/
}
figcaption {
float: left;
text-align: left;
}
}
</style>
</head>
<body>
<figure class="cf">
<img src="http://placehold.it/200x150/0eafff/ffffff.png" alt=""/>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit repudiandae magni deserunt amet accusamus fuga minus quo, ullam, quia alias, hic earum? Rerum sint maiores quisquam ullam illum non autem. Nisi adipisci provident incidunt unde ipsa consectetur laudantium natus repellat ut, optio fuga suscipit vitae expedita fugiat, praesentium porro ab quibusdam itaque placeat quos tempore harum, obcaecati deserunt!</figcaption>
</figure>
</body>
</html>