Css 将图像浮动到文本后的底部

我有一个包含浮动图像和侧面文本的div。若图像向左浮动，文本位于右侧，若图像向右浮动，文本位于左侧。为了更好地显示所有内容，我将

img

元素放在文本之前，并使用CSS中的

+

选择器为文本提供适当的边距（请参见下面的代码）

对于小屏幕，我想将文本和图像显示为块（100%宽度），图像放在文本下面。我试着按照建议使用绝对定位，但没用：图像总是显示在上面。我怎样才能实现我的目标？提前谢谢

HTML

---

以下内容是否适合您

HTML

---

我发现的另一种方法，希望它能成为一个不错的选择

HTML

---

这是我的建议。希望它能帮助别人。

请分享一把小提琴。这可能会帮助你：如果我能在HTML文本后添加

img

，一切都会好起来的。但是这种情况下的问题是：如何在CSS中选择

img

之前的文本来给它留一个空白？哇，太棒了！非常感谢你，伙计！

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

.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;
    }
}

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

.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;
    }
}

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

.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%;
    }
}