Example Fiddle

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。希望它可以帮到某人。

在文本后将图像浮动到底部

2 个答案:

Example Fiddle