css - 当文本在标记中位于文本之前时，如何将 img float 到文本左侧？

Question

我什至不知道这是否可能。我正在尝试使图像向左浮动到文本(或文本向右浮动到图像)。对于移动设备，我需要内容位于图像上方，就像 CSS 查询一样，我想删除格式并让文本保留在图像上方。

https://jsfiddle.net/as1wj9sp/

我试过固定定位，但图像不符合布局的其余部分。

* {
	padding: 0px;
	margin: 0px;
	list-style-type: none;
	font: 1em/1em Arial, Tahoma, Helvetica, sans-serif;
}
#content {
	margin: auto;
	background: #FCC;
	padding: 10px;
}
#index {
	background: #063;
	padding: 2px;
	overflow: hidden;
}
#index h1 {
	float: right;
}
#index img {
	display: block;
	float: left;
	max-width: 90%;
}

<div id="content">
    <div id="index"><h1>The Right Ingredients At The Real Dose asdadasda ad ad as dasdas as das das das dasdas dd asd asdsadasdasd asdasdasd asdasdasd asdasdas dad asd as</h1>
    <img src="img/image.jpg" alt="test" width="200" height="200" /></div>
</div>

Answer 1

我会将这两个元素都更改为display: block，然后您可能需要元素的宽度，为简单起见，假设每个元素为 50%。

使用移动设备的@media-query 完成这个概念。

像这样:

    #index h1 {
        float: right;
        display: block;
        width: 60%;
    }
    #index img {
        display: block;
        float: left;
        width: 40%;
    }

/* Or whatever max-width you want */
    @media (max-width: 768px) {
        #index h1,
        #index img {
            float: left;
            width: auto;
        }
    }