1

我正在开发的网站将在屏幕上显示冗长的文章。该站点具有响应性，因此您在屏幕上看到的所有内容都会重新调整大小和重新排列以适应不同的屏幕。以前我们有一个两列布局，其中文章位于左侧浮动 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;
}

当我尝试将图像添加到文章内容时，问题就出现了。由于该网站是响应式的，我希望图像具有 max-width: 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;
}

为图像提供预定义的宽度可以修复布局，但会导致网站的响应性问题。我也会有一些文章在文案的各个地方都有图像，所以我不能总是预测图像会出现在右侧栏旁边。

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

4

3 回答 3

1

虽然这很旧，但我刚刚找到了一个使用 jQuery 的好而简单的解决方案。

CSS 部分

首先，我们需要将所有图像设置为小，以便它们可以放在浮动 div 旁边。假设 75%；

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

jQuery 部分

然后我们要重置浮动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)
            }
        });
});

希望它以某种方式有所帮助。

于 2016-10-17T19:58:36.827 回答
0

一种看待这一点的方法，但是如果您使用大量图像，它不是很有效并且会非常臃肿。

如果您在 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/

正如 isherwood 指出的那样，从长远来看，将各种视口设置在更有利的位置。

于 2013-02-15T18:10:01.723 回答
0

如果没有用于进行某些计算的脚本，您可能不得不接受较小的图像。

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

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

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

于 2013-02-15T17:25:45.380 回答