Question

我想知道是否有CSS的解决方案，我有下面的代码，并且可能有或没有浮动到右侧的图像。我希望文本仅流向图像的左侧，因此文本不会在它们下方流动，几乎就像它形成自己的列一样。

<div class="content">
<h1>Page title</h1>
<img src="path/to/image">
<p>Some content here, some content here, some content here, some content here, some content here, some content here, some content here, some content here, some content here, some content here, some content here</p>
<p>More content here</p>
</div>

有时可能会有多个图像（紧接着另一个图像），或者根本没有图像。基本上我想知道是否有纯css解决方案而不是单独的列/ div（并避免使用js）。我觉得这是不可能的......！

为了使事情进一步复杂化，它必须兼容所有主流浏览器（包括urgh，ie6）。

Answer 1

仅限css：

img { float: right; width: 100px}
p { margin-right: 100px; } /* margin = image width */

在这里玩：http://jsfiddle.net/SebastianPataneMasuelli/mPTRx/

P.S。如果您使用多个图片，请使用img { float: right; clear: right; }

Answer 2

谢谢大家！

我已经改编了Sebastian的代码，但承认jQuery必须参与进来，因为我并不总是希望在右边有一个差距。

以下是我如何解决它：

HTML（顺便说一句，我不是对某些标记负全部责任，它都在Wordpress网站内！）：

<div class="content">
  <h1>Title</h1>
  <p><img src="blah" class="alignright"></p>
  <p><img src="blah2" class="alignright"></p>
  <h2>Sub title</h2>
  <p>Some content here, some content here, some content here, some content here, some content here, some content here, some content here, some content here, some content here, some content here, some content here</p>
  <p>More content here</p>
</div>

jQuery（更复杂的代码的一部分）：

var $j = jQuery.noConflict(); // so no other plugins affect this in Wordpress
$j(document).ready(function() {
if($j('.alignright').length) { //this checks if an image exists
      $j('.content').children().css('margin-right', '250px');
      $j('.alignright').parent().css({'float':'right','width':'230px','margin':'0px 0px 10px 0px','clear':'right'});
    }
}

我希望这对某人有用！谢谢塞巴斯蒂安的抬头:)

Answer 3

.content p { overflow:[hidden|auto]; }

应该有用。

我让你试着理解：https://developer.mozilla.org/en/CSS/block_formatting_context;）

Answer 4

如果没有额外的div，我认为没有办法做到这一点。

解决方案1：

<style>
.content {margin:0 auto 0 auto; width:960px;} 
img {float:right; margin-bottom:100%;}
</style>
<body>

<div class="content">
<h1>Page title</h1>
<div>
<img src="images/Chrysanthemum.jpg" style="width:10%; height:10%;">
<p>Aliquam eget dolor est, fringilla pellentesque magna. Integer suscipit, mauris at adipiscing tincidunt, ipsum libero sollicitudin nisi, tempus adipiscing nulla orci non neque. Aenean arcu leo, mattis sit amet cursus ac, imperdiet eget nulla. Proin porttitor, nulla a rutrum fringilla, ante turpis rhoncus tellus, eu rhoncus turpis massa quis mauris. Maecenas vehicula rutrum dolor sit amet placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi eleifend; nisi eget facilisis gravida, magna ipsum faucibus ligula, eget commodo metus nibh vel sapien. Aliquam adipiscing erat non lorem cursus quis interdum nulla elementum. Cras ullamcorper magna non dui rutrum at consectetur libero rhoncus. Nunc nisi nulla, gravida quis convallis eu, molestie sit amet ipsum! Suspendisse potenti. Quisque gravida lobortis massa ac imperdiet. Duis tincidunt lorem pellentesque augue convallis luctus? Quisque purus dolor, aliquam hendrerit ultricies a, semper id tortor. Vestibulum sit amet sem ac magna posuere hendrerit id eu quam. Cras nec urna rutrum odio iaculis iaculis. Suspendisse lobortis pellentesque tristique. Duis felis purus, sodales nec euismod eu, congue et ipsum. Integer tincidunt semper orci, in mollis velit mattis eget. Fusce a tincidunt ante.

Sed quam sem, lobortis vel consectetur id, vestibulum quis lorem? Vivamus ornare sagittis neque sit amet lacinia? Mauris molestie blandit eros, non gravida turpis feugiat nec. Integer pretium ligula sit amet justo iaculis auctor. Praesent lacinia tellus ut libero euismod eu ullamcorper mauris convallis? Ut posuere tempus elit a mollis. Quisque velit neque, vestibulum ac laoreet in, adipiscing at lorem. Sed velit arcu, sagittis et porta non, venenatis ut nisl. Nunc faucibus, orci sed bibendum tempus, purus ligula imperdiet nulla, non lacinia arcu mauris sit amet nunc. Etiam consectetur lectus id nibh facilisis porta. Nunc adipiscing scelerisque egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse euismod molestie nulla, sed suscipit lorem dapibus ac! Curabitur vel mauris justo. Sed urna eros, molestie ut sagittis et, pharetra non arcu! Proin vel nisi ante; at suscipit diam? Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum a lacus libero. Sed nec enim tellus, sit amet pulvinar dolor.

Etiam rhoncus dapibus nibh, vitae adipiscing ante lacinia vel. Vivamus facilisis rutrum sem nec laoreet? Etiam non massa quis tortor euismod scelerisque. Nunc fermentum accumsan rhoncus? Duis ut neque eget nulla fringilla porttitor. In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur fermentum, ipsum non ullamcorper consectetur, elit diam ullamcorper augue, vitae porta orci lorem nec dolor. Phasellus facilisis feugiat nisl eu consequat. Fusce sit amet dui eget libero congue rutrum. Phasellus sed sem quam, id aliquam leo? Cras massa dolor, laoreet rhoncus condimentum ut, varius in purus. In hac habitasse platea dictumst.
</p>
</div>
</div>

</body>

这会在图像下方留下一个巨大的边缘，从而阻止文本在下面流动。您可能需要在某些浏览器中为div定义高度。

解决方案2：

<style>
.content {margin:0 auto 0 auto; width:960px;} 
div.images {float:right; width:100px;}
div.text {float:left; width:860px;}
</style>
<body>

<div class="content">
<h1>Page title</h1>
<div class="images">
    <img src="images/Chrysanthemum.jpg" style="width:100px;">
</div>
<div class="text">
<p>Aliquam eget dolor est, fringilla pellentesque magna. Integer suscipit, mauris at adipiscing tincidunt, ipsum libero sollicitudin nisi, tempus adipiscing nulla orci non neque. Aenean arcu leo, mattis sit amet cursus ac, imperdiet eget nulla. Proin porttitor, nulla a rutrum fringilla, ante turpis rhoncus tellus, eu rhoncus turpis massa quis mauris. Maecenas vehicula rutrum dolor sit amet placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi eleifend; nisi eget facilisis gravida, magna ipsum faucibus ligula, eget commodo metus nibh vel sapien. Aliquam adipiscing erat non lorem cursus quis interdum nulla elementum. Cras ullamcorper magna non dui rutrum at consectetur libero rhoncus. Nunc nisi nulla, gravida quis convallis eu, molestie sit amet ipsum! Suspendisse potenti. Quisque gravida lobortis massa ac imperdiet. Duis tincidunt lorem pellentesque augue convallis luctus? Quisque purus dolor, aliquam hendrerit ultricies a, semper id tortor. Vestibulum sit amet sem ac magna posuere hendrerit id eu quam. Cras nec urna rutrum odio iaculis iaculis. Suspendisse lobortis pellentesque tristique. Duis felis purus, sodales nec euismod eu, congue et ipsum. Integer tincidunt semper orci, in mollis velit mattis eget. Fusce a tincidunt ante.

Sed quam sem, lobortis vel consectetur id, vestibulum quis lorem? Vivamus ornare sagittis neque sit amet lacinia? Mauris molestie blandit eros, non gravida turpis feugiat nec. Integer pretium ligula sit amet justo iaculis auctor. Praesent lacinia tellus ut libero euismod eu ullamcorper mauris convallis? Ut posuere tempus elit a mollis. Quisque velit neque, vestibulum ac laoreet in, adipiscing at lorem. Sed velit arcu, sagittis et porta non, venenatis ut nisl. Nunc faucibus, orci sed bibendum tempus, purus ligula imperdiet nulla, non lacinia arcu mauris sit amet nunc. Etiam consectetur lectus id nibh facilisis porta. Nunc adipiscing scelerisque egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse euismod molestie nulla, sed suscipit lorem dapibus ac! Curabitur vel mauris justo. Sed urna eros, molestie ut sagittis et, pharetra non arcu! Proin vel nisi ante; at suscipit diam? Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum a lacus libero. Sed nec enim tellus, sit amet pulvinar dolor.

Etiam rhoncus dapibus nibh, vitae adipiscing ante lacinia vel. Vivamus facilisis rutrum sem nec laoreet? Etiam non massa quis tortor euismod scelerisque. Nunc fermentum accumsan rhoncus? Duis ut neque eget nulla fringilla porttitor. In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur fermentum, ipsum non ullamcorper consectetur, elit diam ullamcorper augue, vitae porta orci lorem nec dolor. Phasellus facilisis feugiat nisl eu consequat. Fusce sit amet dui eget libero congue rutrum. Phasellus sed sem quam, id aliquam leo? Cras massa dolor, laoreet rhoncus condimentum ut, varius in purus. In hac habitasse platea dictumst.
</p>
</div>
</div>

这需要2个div，一个用于保持图像向右浮动，一个用于保持文本向左浮动。两者都需要一个定义的宽度。

CSS图像解决方案浮动图像到右边但没有文字在下面流动

4 个答案: