文字后将图片浮动到底部

debugcn 发表于 Dev

乔治

我有一个包含浮动图像和侧翼文本的div。如果图像向左浮动，则文本位于右侧，如果图像向右浮动，则文本位于左侧。为了显示一切正常，我将img元素放在文本之前，并使用+CSS中的选择器为文本提供适当的边距（请参见下面的代码）。

对于小屏幕，我想将文本和图像显示为块（宽度为100％），图像放置在文本下方。我尝试按照此处的建议使用绝对定位，但是它没有用：图像始终显示在上方。我该如何实现自己的目标？提前致谢。

的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在这里

SW4

以下内容对您有用吗？

小提琴的例子

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。