Question

我正在为某人创建一个旧网站，并且无法理解其中的某些内容：

我有一个包含页面（文章）内容的div，当然包括一些图像。在div的顶部有另一个div，有关于该文章的额外信息。第二个div漂浮在左边。

<div class="entry-content">
  <div class="lefttable"> //floated to the left
  //some information here
  </div>

  //content here, including images
</div>

内容中的imgs甚至在页面顶部都是完整大小的，并且它们应该位于lefttable div旁边，它们会跳到它下面。

这是一个打印屏幕：https://snag.gy/qFChjB.jpg

和页面本身：http://www.bayadaim.org.il/95b

谢谢，伊塔马尔

Answer 1

您图片的父级

内联样式规则width: 970px
wp-caption和aligncenter类意味着：
- style.css:1271
- style.css:1257。

以上所有规则都禁止您的元素与其前面的浮动内容并排显示。

您需要为图片的父元素提供一个宽度，以便相应地补偿浮动内容的宽度（您可以使用max-width和calc执行此操作，前提是页面容器具有{{ 1}}，它确实如此）并且您需要将position:relative设置为display，inline或inline-block。我推荐inline-flex。

这就是理论在实践中，对于您的特定情况，您还需要补偿左浮动元素的一些填充/边距。这是CSS：

inline-block

Answer 2

您可以尝试max-width和calc()：

＆＃13;

.lefttable {
  width:200px;
  float:left;
}
.right {
  overflow:hidden: /* to deal with floats in and out */;
}
.right img {
  max-width:calc(100% - 200px); /* where 200px is the room used by lefttable ( mind borders,  padding and margins) */
}

＆＃13;

<div class="entry-content">
  <div class="lefttable"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>   
  </div>
  <div class="right">
    <img src="http://dummyimage.com/1200x200" />
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>

＆＃13;

Answer 3

使用一些jQuery我找到了方法。它没有响应，但这个主题我都没有编辑 - 所以它对我来说已经足够好了。当然，任何想要开发它的人都非常欢迎这样做。

CSS部分

将所有图像包装器（wp-caption）的宽度设置为浮动div旁边的主内容div的宽度。

#content .wp-caption {
    width: 66%;
}

jQuery Part

//make all images in posts 100% width except images next to the left table
jQuery(document).ready(function(){
        var h = jQuery(".lefttable").height(); //get left table height

        jQuery('.entry-content .wp-caption').each(function(){ //loop through all .wp-captions in the 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 .wp-caption is below .lefttable
                jQuery(this).css("width", "initial") //change .wp-caption width to original (or anything you like)
            }
        });
});

那就是它。我希望有人可以从中受益。伊塔马尔

收缩img以适合带有侧边栏的div

3 个答案:

CSS部分

jQuery Part