我想按照图片所示布局网页：
正文（一系列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"/>
最佳答案
简单的方法是添加计算宽度（例如100% - 100px表示100px宽列的右侧）：
.leave-space-form-right {
width: calc(100% - 100px);
float:left;
}
.put-element-on-right {
float:left;
}
这是一个例子：
https://jsfiddle.net/txdue3n0/6/