如何在文章旁边放置图片和分隔符？

Question

将图片放在文本右侧的最佳方法是什么（文本占据容器的70％）然后会出现一条垂直线（即边框），然后是图片？我在考虑用3列创建表格，但不确定这是实现他的最佳方式吗？ http://jsfiddle.net/2RqGu/

我想要实现的目标：

现在的样子：

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

  <div class="block width100 white-background">
          <ol class="block_numbers">
            <h3>Notre approche</h3>
            <li>
              <p><strong>L'entraînement</strong></p>
              <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>
              </article>
            </li>
            <li>
              <p><strong>Un entdsfdsesure</strong></p>
              <article>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elementum lectus a felis tristique mattis. Nullam dolor augue, tempor at risus in, faucibus venenatis eros. Phasellus adipiscing, nunc at mattis luctus, sem nunc mollis diam, sed tincidsfsdl nisl. Phasellus at justo nec lacus bibendum malesuada. Mauris vel tristique ante. Sed arcu arcu, malesuada eget nibh et, lobortis feugiat 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>
              </article>
            </li>
            <li>
              <p><strong>Vous et dfsnt</strong></p>
              <article>
                <p>Vestibulum ullamcorper eros elit. Quisque diam dui, iaculis vel velit vitae, pulvinar ornare lorem. Integer sagittis nisl eget arcu eleifend, ut facilisis ligula facilisis. Curabitur orci odio, pellentesque ut volutpat eu, scelerisque et nisl. Fusce tempor aliquam sem, eget commodo purus scelerisque at. Praesent bibendum velit ac nunc condimentum, eu tempus dui vestibulum. Etiam vel massa gravida, rhoncus sem a, consectetur purus. In blandit vel velit sed eleifend. Integer vel felis quis dolor tempus iaculis ac auctor orci. Praesent id malesuada libero, eu vestibulum eros.</p>
              </article>
            </li>
            <li>
              <p><strong>Des cdfsonnels</strong></p>
              <article>
                <p>Sed laoreet sapien pellentesque malesuada tempus. Vestibulum blandit libero nec nisi porttitor, eget hendrerit tortor ultricies. Fusce nunc lectus, elementum sed molestie porttitor, auctor in orci. Mauris turpis augue, congue dapibus sem eget, aliquet porta est. Curabitur vitae urna metus. Etiam eget adipiscing ipsum. Quisque ac orci dui. Ut elementum felis dolor, posuere imperdiet odio egestas et. Vestibulum interdum sit amet dolor at posuere. Duis facilisis libero et odio porttitor, vitae euismod libero rhoncus.</p>
              </article>
            </li>
          </ol>
        </div>

Answer 1

我认为使用表格不是一个好的/正确的解决方案。

为您拥有的每篇文章创建一个容器， 在这里你创建了2个其他div。首先是你的文字。秒是你的形象。 （不知道如何做垂直的木质。

  <div class="ArticleContainer">
    <div id="ArticleText">
      All your text here.
    </div>

    <div id="ArticleImage">
      here comes your image, which ofcourse contains no text. only a background-image
    </div>
 </div>

你的css会是这样的

.ArticleContainer{
  width: your width;
}

#ArticleText{
 float: left;
 width: 70%;
}

#ArticleImage{
  float: right;
  width: 30%;
}

希望这会有所帮助。

Answer 2

表格不是布局的最佳方式。 Find out why.因此，可以在主容器中创建两个div。一篇用于文章文本，另一篇用于文章图片。

<强> HTML

<div class="text">
    Text
</div>
<div class="image">
    Image
</div>

<强> CSS

.text {
    float: left;
    width: (in percentage for responsiveness);
}

.image {
    float: right;
    width: (allow it to not add up to 100% to have a margin);
    padding-left: 5px;
    border-left: 2px solid #eee;
}

border属性用于实现分隔符，而填充使边框不会粘贴到图像上，而是放在文本和图像之间。调整两个div的宽度，使其看起来相称。