Question

我正在处理的网站将在屏幕上显示冗长的文章。该网站具有响应性，因此您在屏幕上看到的所有内容都会重新调整大小并重新流动以适应不同的屏幕。以前我们有两列布局，文章将在左浮动div中。一个较短内容的侧栏将在右手浮动div。

决定由于右手内容太短，因此下方有很多浪费的白色空间。我被要求尝试将右手栏合并到左手div中，以便文本环绕它。

这部分非常简单，我只是将现在嵌入的右栏放入文章中，并将书面文字包裹在其中。

看到这个JSFiddle： http://jsfiddle.net/TheMonkxx/2aucA/1/

以下是该页面的HTML：

<div class="parent">
<div class="right_content" align="right"></div>

Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Maecenas vitae nunc arcu. Cras tortor velit, consectetur
quis consectetur vel, ultrices eu nisl. Pellentesque convallis orci ligula,
id pharetra mauris. Vestibulum eleifend, turpis eget commodo dapibus, diam

magna nunc auctor elit, nec molestie libero quam quis mi. Donec interdum
velit non arcu sollicitudin eu ullamcorper lectus venenatis. Vivamus at
lacus magna. Proin in diam semper urna fermentum molestie sit amet sit
amet augue. Nulla sit amet massa eu risus laoreet laoreet eget sed erat.
Aliquam quis enim in odio porta consequat. Ut egestas urna et erat iaculis
et aliquam libero auctor.</div>

这是CSS

.parent {
 border: 1px solid green;
 width: 200px;
 float: right;
}

.right_content {
 width: 25%;
 height: 150px;
 float: right;
 background-color: red;
 margin: 0 0 7px 7px;
}

当我尝试将图像添加到文章内容时出现问题。由于网站响应，我希望图像具有最大宽度：100％应用。然而，当我这样做时，图像将100％移动到父容器中，并且在右侧列之后推送图像下方的任何书面内容。看到这个小提琴：

http://jsfiddle.net/TheMonkxx/2a66J/

以下是该页面的更新HTML：

<div class="parent">
<div class="right_content" align="right"></div>
<img src="http://www.thetop22.com/wp-content/uploads/2012/01/Black-Keys-Banner-3.png"
/>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Maecenas vitae nunc arcu. Cras tortor velit, consectetur
quis consectetur vel, ultrices eu nisl. Pellentesque convallis orci ligula,
id pharetra mauris. Vestibulum eleifend, turpis eget commodo dapibus, diam

magna nunc auctor elit, nec molestie libero quam quis mi. Donec interdum
velit non arcu sollicitudin eu ullamcorper lectus venenatis. Vivamus at
lacus magna. Proin in diam semper urna fermentum molestie sit amet sit
amet augue. Nulla sit amet massa eu risus laoreet laoreet eget sed erat.
Aliquam quis enim in odio porta consequat. Ut egestas urna et erat iaculis
et aliquam libero auctor.</div>

更新的CSS：

img {
  max-width:100%;
}
.parent {
   border: 1px solid green;
   width: 200px;
   float: right;
}
.right_content {
   width: 25%;
   height: 150px;
   float: right;
   background-color: red;
   margin: 0 0 7px 7px;
}

为图像赋予预定义的宽度可以修复布局，但这会导致网站的响应性问题。我也会有一些文章在副本的各个地方都有图像，所以我不能总是预测图像会在右边的列旁边。

我是如何获得所需布局并保持响应方面有效的任何想法或建议？谢谢！

Answer 1

虽然这已经过时了，但我刚刚使用jQuery找到了一个简单易用的解决方案。

CSS部分

首先，我们需要将所有图像设置为较小，以便它们可以放在浮动div旁边。让我们说75％;

.parent img {
  max-width:100%;
  width: 75%;
}

jQuery Part

然后我们要重置浮动div下方所有图像的宽度：

jQuery(document).ready(function(){
        var h = jQuery(".right_content").height(); //get floating div height (let's say it's dynamic).

        jQuery('.parent img').each(function(){ //loop through all images in content
            jQuery(this).removeAttr('style') //remove any disturbing inline styles. optional.
            var p = jQuery(this).position(); //get each .wp-caption position
            var top = p.top; //top position
            if(top > h){ //if img is below the floating div
                jQuery(this).css("width", "initial") //change img width to original (or anything you like)
            }
        });
});

希望它能以某种方式提供帮助。

Answer 2

如果没有用于进行某些计算的脚本，您可能需要适应较小的图像。

http://jsfiddle.net/2a66J/2/

img {
    max-width:72%;
    float: left;
}

从技术上讲，您的网站不是“响应式”。它是“流动的”。如果它是响应式的，您可以根据视口大小设置固定的最大宽度，并为所有方案提供100％的图像宽度。缺点是您通常不会使用响应式设计的页面的100％可用视口宽度。

Answer 3

一种看待这种情况的方法，但是如果您处理大量图像，它不是非常有效并且非常臃肿。

如果您在jsFiddle上发布的内容是您必须使用的所有内容，那么我的建议是添加一个围绕所述文章图像。然后，您将此约束为百分比，并使用辅助类向左或向右浮动。

HTML

<div class="article_image article_image_flleft"><img src="http://www.thetop22.com/wp-content/uploads/2012/01/Black-Keys-Banner-3.png"
/></div>

CSS

.article_image{
 width: 50%;
}
.article_image_flleft{
 float: left;
}

小提琴： http://jsfiddle.net/D8ELj/1/

正如伊舍伍德指出的那样，从长远来看，设置各种视口会更有利。

图像最大宽度（非浮动）使用浮动div旁边的空间？

3 个答案:

CSS部分

jQuery Part