html - 如何获得包含几行文本和下半部分文本和半部分图像的部分

Question

如何使用 HTML、CSS 和 Bootstrap 实现以下类型的结果？

Answer 1

您可以在没有 Bootstrap 的情况下执行此操作。要使图像与您的文本内联，您可以在图像上使用 float: right。这是一个简单的内联 CSS 示例:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis pulvinar nulla, scelerisque viverra lorem pellentesque non. Phasellus ligula leo, facilisis eget<p>

<p>Proin sit amet elit eget dolor sagittis blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed sollicitudin ullamcorper mi sit amet pretium. Nam quis pulvinar purus. <img src="http://via.placeholder.com/350x150" style="float:right" />Integer eget lobortis justo, a porta odio. In non lacinia leo. In hac habitasse platea dictumst. </p>

<p>Nullam elementum, justo et ornare semper, sapien arcu ornare nunc, a laoreet tortor neque sit amet dui. Aenean eleifend nibh nec tempus interdum. Nulla augue purus, scelerisque in massa sed, fringilla tempor nisl. Nam tincidunt porta nibh, in pharetra quam pellentesque ac. Nunc metus turpis, rhoncus eu mauris eu, hendrerit suscipit tellus. Aliquam erat volutpat. Praesent odio nisi, venenatis ac scelerisque vel, pharetra et eros. Vivamus at elementum mauris, nec consequat odio. Quisque volutpat pharetra mollis. Curabitur tempor orci in auctor ultrices. Aliquam condimentum elementum euismod.</p>

如果你真的想使用 bootstrap，你可以将 pull-right 类添加到图像中，如下所示:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis pulvinar nulla, scelerisque viverra lorem pellentesque non. Phasellus ligula leo, facilisis eget<p>

<p>Proin sit amet elit eget dolor sagittis blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed sollicitudin ullamcorper mi sit amet pretium. Nam quis pulvinar purus. <img src="http://via.placeholder.com/350x150" class="pull-right" />Integer eget lobortis justo, a porta odio. In non lacinia leo. In hac habitasse platea dictumst. </p>

<p>Nullam elementum, justo et ornare semper, sapien arcu ornare nunc, a laoreet tortor neque sit amet dui. Aenean eleifend nibh nec tempus interdum. Nulla augue purus, scelerisque in massa sed, fringilla tempor nisl. Nam tincidunt porta nibh, in pharetra quam pellentesque ac. Nunc metus turpis, rhoncus eu mauris eu, hendrerit suscipit tellus. Aliquam erat volutpat. Praesent odio nisi, venenatis ac scelerisque vel, pharetra et eros. Vivamus at elementum mauris, nec consequat odio. Quisque volutpat pharetra mollis. Curabitur tempor orci in auctor ultrices. Aliquam condimentum elementum euismod.</p>