Question

我整个周末都在研究这个问题，由于某种原因，我无法正确地排除这个问题。我试图让图像显示在我所拥有的文本的右边，它不会去，有人可以帮我看看我做错了吗？

编辑：为了澄清图像下的一小部分文本应该在图像下面，我希望图像和一小部分图像浮动到巨大的文本块的右侧。

HTML5

<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>

CSS3

#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;
}

Answer 1

有两个问题：

图片太大，网页无法让文字放在一边。
在主要的销售包装div中，你告诉所有东西向左浮动，因此图像不想坐在右边

为了获得更好的解决方案，您可以使用css正确定位它们或使用html表格来保存左侧的文本和右侧的图像。然而，一个简单的解决方案是减小图像大小并告诉文本在图像向右浮动时向左浮动。

这里有一个简单的解决方案：

http://jsfiddle.net/4KNH9/

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

#floatright {
    float:left;
}

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

试图让图片漂浮在文本右侧

1 个答案: