Question

所以我试图把文字放在右边，图像留在它旁边，这样我左右边距也有一些空间（相等）。我陷入了像素和宽度，所以当我缩小窗口时，它没有响应，也没有很好地包裹。我在媒体查询中也添加了100％的宽度，但即使这样，当窗口缩小时它仍然有空格和滑块。非常感谢帮助...

<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

使用aside而不是浮动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

如何将文本放在图像旁边，以便它以页面为中心并响应？谢谢

1 个答案: