Html 试图使图片在文本右侧浮动

我整个周末都在忙这个，不知什么原因，我就是不能把这个部门排好。我正试图让图片进入文本的右侧，但它不会离开，有人能帮我看看我做错了什么吗

编辑：为了澄清图片下面的一小段文字应该在图片下面，我希望图片和那一小段图片浮动到巨大文本块的右侧

HTML5

---

有两个问题：

图像太大，页面无法容纳文本。 在主销售包装分区中，您告诉所有内容向左浮动，因此图像不希望位于右侧 为了获得更好的解决方案，您可以使用css来正确定位它们，或者使用html表格来保存左侧的文本和右侧的图像。然而，一个简单的解决方案是减小图像大小，并告诉文本向左浮动，而图像向右浮动

这个简单的解决方案如下所示：

---

如果您使用的图像大小不同，您可能需要使用表格或在css中设置图像的宽度和高度，如果您需要任何帮助，请告诉我。

jsfiddle here:，您的html格式不正确。是的，老实说，我对web开发有点陌生。我正在尝试学习如何编写更干净的代码，但奇怪的是，HTML中似乎没有太多的信息。尝试了这个方法，使我的图片变小，使我的p和h语句的宽度变小，但图片仍然无法正确显示。我制作的JSFIDLE效果很好，试试这个链接：让我知道你是怎么得到的这不是我的意思，对不起，也许应该说得更清楚。价格应该低于图片。顶部的大文本块应该浮动到这些图像的右侧以及图像下方的描述区域。对不起，我不太明白你想要什么布局，是不是应该这样：字体大小和内容有点乱，但不要担心我用microsoft wordYeah做了这就是我要做的，整个周末都在做这件事，想在今天完成。我还是看不出有什么问题。

<section id="content-wrapper"> <!-- Main content of the site -->
    <div id="content">
        <article>
            <header>
                <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit!!</h1>
            </header><br>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><br>

            <p>Lorem ipsum dolor sit amet,</p>
            <p>Lorem ipsum dolor sit amet,</p>
            <p>Lorem ipsum dolor sit amet,</p><br>

            <p>Lorem ipsum dolor sit amet,</p><br>

            <header>
                <h2><p>Lorem ipsum dolor sit amet,</p></h2>
            </header><br>

            <ul>
                <li>Lorem </li>
                <li>Lorem </li>
                <li>Lorem </li>
                <li>Lorem </li>
                <li>Lorem </li>
                <li>Lorem </li>
                <li>Lorem </li>
                <li>Lorem </li>
            </ul><br>

            <header>
                <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit!</h2>
            </header><br>

            <header>
                <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h2>
            </header><br>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

            <footer>
                <p>Lorem        &#42;  Lorem        &#42;  Lorem </p>
            </footer>

            <div id="sales-wrapper">
                <div id="sale-item1">
                        <img src="http://placehold.it/350x450">
                    <p>
                        Lorem ipsum dolor sit amet<br>
                        Price: $888
                    </p>
                <div id="sale-item2">
                        <img src="http://placehold.it/350x450">
                    <p>
                        ipsum dolor sit amet<br>
                        Price: $888
                    </p>
                </div>
                <div id="sale-item3">
                        <img src="http://placehold.it/350x450">
                    <p>
                        ipsum dolor sit amet<br>
                        Price: $888
                    </p>
                </div>
                </div>
            </div>  
        </article>
    </div>
</section>

#content-wrapper {
    width: 70%;
    margin: 1% auto;
    line-height: 20px;
    background-color: #F0F8FF;
    overflow: hidden;
}

#content {
    width: 100%;
    float: left;
    margin: 2%;
    background-color: antiquewhite;
}

#content article {
    padding: 3% 5%;
    background-color: gray;
    float: left;
}

#content article  p {
    font-size: 16px;
    margin-left: 2%;
}
#content article ul {
    list-style: none;
    margin-left: 5%;
}

#content article ul li {
    font-size: 16px;
}

#content article header h2 {
    color: #354175;
}

#content article footer {
    width: 100%;
    float: left;
    text-align: center;
}

#content article footer p {
    font-weight: bold;
    font-size: 23px;
color: #354175;
}

#sales-wrapper {
    width: 30%;
    float: left;
    background-color:black;
}

#sales-wrapper {
    width: 100%;
    float: right;
    color:white;
}

#floatright {
    float:left;
}