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

将图片放在文本右侧的最佳方式是什么（文本占容器的70%），然后是垂直线（即边框），然后是图片？我在考虑创建包含3列的表，但不确定这是否是实现his的最佳方法

我想要实现的目标：

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

现在的样子：

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

.block{
填充：20px；
背景剪辑：边框框；
框大小：边框框；
-webkit盒阴影：0 1px2pRGBA（0,0,0,0.1）；
-moz盒阴影：0 1px2pRGBA（0,0,0,0.1）；
盒影：0 1px2pRGBA（0,0,0,0.1）；
溢出y：自动；
溢出x：隐藏；
边框：1px实心#333；
}
.100{
宽度：100%；
}
.白色背景{
背景：#fff；
}
.区块编号{
计数器复位：li；
利润率：0.5px；
左侧填充：0；
}
.区块编号h3{
颜色：#3A7CDB；
字号：28px；
字体大小：300；
边际上限：0；
}
.区块编号p{
显示：内联块；
利润率：0.05倍；
}
.block_number>li{
列表样式：无外无；
利润率：0.27px；
位置：相对位置；
}
.block_number>li:之前{
-moz框大小：边框框；
背景：无重复滚动0 0#3A7CDB；
边界半径：2px；
颜色：#FFFFFF；
内容：计数器（李，十进制）；
反增量：李；
显示：内联块；
字体大小：13px；
右边距：6px；
填充：1px0；
文本对齐：居中；
顶部：-2px；
宽度：22px；
}
诺特法

L'entraînement

尤吉亚特·内克。活得很好，我的伤口愈合得很好，埃尼·贾斯托·佩伦茨克·贾斯托，坐着艾米特·阿利奎特·托尔托·托尔托·托尔普。佩伦特斯式的自由辩论，非流苏式的格言。在莱索斯·莱克托斯（risus lectus）、马萨·奎斯（massa-quis）和波特提托酒后驾车（dui）会议上发言。我在8月份开始了一个新的尝试



取消EntDSF评估

Lorem ipsum dolor sit amet，是一位杰出的献身者。阿利奎姆莱克托姆马蒂斯猫。努拉姆·多洛·奥古斯，里苏斯的临时牧师，威尼斯爱神浮士。Phasellus Adipising、mattis luctus的nunc、sem nunc mollis diam、sed tincidsfsdl nisl。在马莱苏阿达的胡斯托·内克·拉库斯·比本杜姆（justo nec lacus bibendum malesuada）。毛里斯·维尔·特里斯蒂克·安特。这是一个很好的例子。活得很好，我的伤口愈合得很好，埃尼·贾斯托·佩伦茨克·贾斯托，坐着艾米特·阿利奎特·托尔托·托尔托·托尔普。佩伦特斯式的自由辩论，非流苏式的格言。在莱索斯·莱克托斯（risus lectus）、马萨·奎斯（massa-quis）和波特提托酒后驾车（dui）会议上发言。我在8月份开始了一个新的尝试



您和dfsnt

前庭-乌兰科珀爱神精英。酒后驾车，生命之路，精神之路。整型矢状面，额弓，额舌面。库拉比图尔·奥齐奥、佩伦特斯克·奥帕特·欧、权杖和尼索。这是一种暂时的不平等，是一种普遍的权杖。Praesent bibendum velit ac nunc调味品，欧盟tempus dui前庭。孕妇的健康状况，健康状况，健康状况。在温文尔雅的音乐中，她唱得优美动听。整只猫的体温是多少。自由女神，欧盟前庭爱神



Des cdf人员

塞德·拉奥里特·萨皮恩·佩伦茨克·马莱苏达·坦普斯。前庭是一个自由的前庭，是一个特殊的前庭。这是一种新的选择，是一种新的分子元素。Mauris turpis augue、congue dapibus sem eget、aliquet porta est。库拉比图尔维塔乌尔纳梅特斯酒店。Etiam eget与同侧分开。奎斯克·阿克·奥奇酒后驾车。但是，如果是猫科动物的元素，posuere将由odio egestas和interdum的前庭在posuere坐下来。自由与自由的双重便利，自由的生命

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

为你拥有的每一件物品创建一个容器， 在这里，您可以创建另外两个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>

---

希望这能有所帮助。

表格不是布局的最佳方式。因此，建议在主容器中创建两个div。一个用于文章文本，另一个用于文章图像

HTML

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

border属性用于实现分隔符，而padding使边框不粘在图像上，而是在文本和图像之间。调整两个分隔符的宽度，使其看起来成比例。

看看我的。最后一种方法也是响应性的。

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