CSS решение для плавающих изображений вправо, но без текста под ним - PullRequest
Новая
       7

CSS решение для плавающих изображений вправо, но без текста под ним

0 голосов
/ 19 ноября 2010

Я хотел бы знать, есть ли решение с 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).

Ответы [ 4 ]

2 голосов
/ 19 ноября 2010

только с css: 

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

поиграйте с ним здесь: http://jsfiddle.net/SebastianPataneMasuelli/mPTRx/

пс, если вы используете более одного изображения, используйте img { float: right; clear: right; }

1 голос
/ 19 ноября 2010

Спасибо, ребята!

Я адаптировал код Себастьяна, но признал, что должен быть задействован 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'});
    }
}

Надеюсь, это кому-нибудь пригодится! Спасибо Себастьяну за голову :)

0 голосов
/ 19 ноября 2010

Я не думаю, что есть способ сделать это без включения дополнительных divs.

Решение 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, один для удержания ваших изображений плавающими вправо, а другой для удержания текста.плыл влево.Оба нуждаются в определенной ширине.

0 голосов
/ 19 ноября 2010 
.content p { overflow:[hidden|auto]; }

должно работать.

Я позволю вам попытаться понять: https://developer.mozilla.org/en/CSS/block_formatting_context;)

...