html - 为什么我的图片没有放在文字的右侧？

Question

你好，你知道为什么我的图片放在我的文字文章下面，而不是我想要的右侧吗？非常感谢http://jsfiddle.net/2RqGu/1/

图片放在下一个而不是文本的右侧: HTML

<div class="block width100 white-background">
    <ol class="block_numbers">
         <h3>Notre approche</h3>

        <li>
            <p><strong>Title 1</strong>

            </p>
            <div class="element">
                <article>
                    <p>eugiat neque. Vivamus placerat, mi sed vulputate euismod, enim justo pellentesque justo, sit amet aliquet tortor est ac turpis. Pellentesque consequat libero non fringilla dictum. Proin risus lectus, imperdiet tincidunt massa quis, consequat porttitor dui. Nam vel mi sed enim sollicitudin varius ut ac augue.</p>
                    <img src="http://placehold.it/150x150" />
                </article>
            </div>
        </li>
        <li>
            <p><strong>Title 2</strong>

            </p>
            <div class="element">
                <article>
                    <p>eugiat neque. Vivamus placerat, mi sed vulputate euismod, enim justo pellentesque justo, sit amet aliquet tortor est ac turpis. Pellentesque consequat libero non fringilla dictum. Proin risus lectus, imperdiet tincidunt massa quis, consequat porttitor dui. Nam vel mi sed enim sollicitudin varius ut ac augue.</p>
                    <img src="http://placehold.it/150x150" />
                </article>
            </div>
        </li>
    </ol>
</div>

CSS

.block {
    padding: 20px;
    background-clip: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #333;
}
.width100 {
    width: 100%;
}
.white-background {
    background: #fff;
}
.block_numbers {
    counter-reset: li;
    margin: 0 0 0 5px;
    padding-left: 0;
}
.block_numbers h3 {
    color: #3A7CDB;
    font-size: 28px;
    font-weight: 300;
    margin-top: 0;
}
.block_numbers p {
    display: inline-block;
    margin: 0 0 5px;
}
.block_numbers > li {
    list-style: none outside none;
    margin: 0 0 27px;
    position: relative;
}
.block_numbers > li:before {
    -moz-box-sizing: border-box;
    background: none repeat scroll 0 0 #3A7CDB;
    border-radius: 2px;
    color: #FFFFFF;
    content: counter(li, decimal);
    counter-increment: li;
    display: inline-block;
    font-size: 13px;
    margin-right: 6px;
    padding: 1px 0;
    text-align: center;
    top: -2px;
    width: 22px;
}
.element {
    width:100%;
    display:table;
    background:rgb(134, 226, 255);
    margin:10px 0px;
    padding:10px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
p {
    display:table-cell;
    height:100%;
    vertical-align:top;
    background:white;
}
img {
    display:table-cell;
}

Answer 1

首先，要放置在 <p> 中的图像生成有效的 HTML。如果您想让图像保持在白色背景之外，请创建第二个段落。

        <article>
            <p class="content">eugiat neque. Vivamus placerat, mi sed vulputate euismod, enim justo pellentesque justo, sit amet aliquet tortor est ac turpis. Pellentesque consequat libero non fringilla dictum. Proin risus lectus, imperdiet tincidunt massa quis, consequat porttitor dui. Nam vel mi sed enim sollicitudin varius ut ac augue.</p>
            <p class="image"><img src="http://placehold.it/150x150" /></p>
        </article>

其次，您需要缩小第一段的大小以保留图像的位置:

  p.content {
      width:70%;
  }

Updated JSFiddle