将主要文本放在一个列中，将图像放在单独的右列中

Question

我想按照图片中的示意图布局网页： 主要文本（一系列div元素）应该放在主列中。我确实偶尔有与文字有关的图片和言论，但我不想中断实际的文字流程。 如何在主列中给定div元素的右侧放置给定的图像或“备注”文本框？

在下面的最小示例中，如何将img元素放在第二个div元素的右侧？

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Pellentesque eu condimentum ligula. Fusce sollicitudin quam ornare, 
pharetra lorem quis, luctus erat. Nulla convallis velit magna, sit 
amet semper erat cursus sed. Praesent non turpis id lectus aliquet
 vestibulum. Donec non leo venenatis, commodo dolor eget, facilisis 
turpis. Donec dapibus scelerisque orci vel molestie. Vestibulum ut 
elit a arcu interdum tempor ut scelerisque enim. Duis maximus ex sit 
amet elit scelerisque, ultricies feugiat mauris feugiat. Morbi non 
egestas arcu, at semper massa. Ut feugiat metus eget nulla porttitor 
lobortis. Praesent lorem lacus, finibus quis blandit a, iaculis sed 
mauris. Vivamus aliquam molestie ex, a lacinia erat faucibus non. 
Donec scelerisque neque ac ante interdum, vel varius justo tincidunt. 
Quisque ultricies nulla in nisi facilisis, et accumsan libero imperdiet. 
</div>

<div>Curabitur imperdiet at diam eget rhoncus. Aenean pretium magna 
quis sodales ornare. Sed vitae vehicula nisi. Nulla a tristique lectus. 
Nam rutrum ut libero viverra porta. In rhoncus leo et mi luctus, at 
osuere est commodo. Vestibulum fringilla luctus mi, in consectetur sem 
semper non. Phasellus ac augue et purus vulputate suscipit. 
Pellentesque tempus imperdiet urna non convallis. Quisque finibus elit 
magna, nec finibus ipsum ornare vitae. Vestibulum id sapien est. Maecenas 
in mauris sit amet orci facilisis bibendum id sed ante. Vestibulum at 
egestas justo. In nibh ex, ullamcorper sit amet urna vel, molestie mattis
 tortor. Ut vel felis dolor. 
</div>

<img src="img.png"/>

Answer 1

最简单的方法是添加计算宽度（例如，100% - 100px右边的100px列宽）：

.leave-space-form-right {
  width: calc(100% - 100px);
  float:left;
}

.put-element-on-right {
  float:left;
}

这里是一个例子：

https://jsfiddle.net/txdue3n0/6/