html - 如何将文本放在图像旁边，使其位于页面中心并响应？谢谢

Question

所以我试图将文本放在右边，图像放在它旁边，这样我在左右边距上也有一些空间(相等)。我被像素和宽度所困，所以当我缩小窗口时它没有响应并且不能很好地包裹。我也在媒体查询中添加了 100% 宽度，但即便如此，当窗口缩小时它仍然有空格和 slider 。非常感谢帮助...

<article>
    <img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg">
</article>

<aside>
<h3>Text text</h3><br>
<p>
text texttext texttext texttext texttext texttext texttext texttext texttext texttextexttext texttext texttext texttext texttext texttext texttext texttextxt texttext texttext texttext text
text text text texttext texttext texttext texttext texttext texttext texttext text texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext text
</p>
</aside>

这是我的CSS

article img{
    float: left;
    margin: 0 auto;
    margin-left: -25px;
    margin-top: -27px;
    width: 45%;
    height: auto;
    padding: 4%;
}

aside {
    float: right;
    margin: 0 auto;
    width: 45%;
    height: auto;
    margin-top: 25px;
}

Answer 1

不要将放在一边，而是使用margin-left: 47%;:

article img{
    float: left;
    margin: 0 auto;
    margin-left: -25px;
    margin-top: -27px;
    width: 45%;
    height: auto;
    padding: 4%;
}

aside {
    margin-left: 47%;
    width: 45%;
    height: auto;
    margin-top: 25px;
}

<article>
    <img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg">
</article>

<aside>
<h3>Text text</h3><br>
<p>
text texttext texttext texttext texttext texttext texttext texttext texttext texttextexttext texttext texttext texttext texttext texttext texttext texttextxt texttext texttext texttext text
text text text texttext texttext texttext texttext texttext texttext texttext text texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext text
</p>
</aside>

演示:JSFiddle