jquery - 允许 HTML 内容超出父级的宽度

Question

我正在尝试修改我网站上的内容以在不更改字体大小的情况下降低每行的字符数。为此，我想降低内容容器的宽度。目前宽度是 984px，我打算把它降低到 757px。

我遇到的问题是带有内容的图像。所有图像都在 content 元素内的 div 或 figure 元素内。我仍然需要图像的最大宽度为 984px。有什么办法可以只用 CSS 来解决这个问题，还是我还需要 jQuery？

这里是一些代码的例子。内容来自于一个类(class)，而且类(class)内容很多，所以编辑所有类(class)内容是不可行的。我需要采用现有样式来进行这些更改。

<div class="content">
    <h2 class="course-heading">Driver Bearings</h2>
    <p class="course-content" style="margin-left: 80px;">The unit uses both oil and grease lubricated bearings: the drive (top) bearings use oil while the bearings at the opposite end (bottom) use grease. A closeup view of the top oil fill and drain can be viewed here:</p>
    <div>
        <img alt="Oil Bearing Lubrication" class="course-image" src="/digi-oilView-01.png">
    </div>
    <p class="course-caption">Oil Bearing Lubrication</p>
</div>

此外，所有内容都应位于页面中央。

Answer 1

首先你需要设置一个height所以它不会调整以包含所有内容。

HTML

<div class="content">
     <h2 class="course-heading">Driver Bearings</h2>

    <p class="course-content" style="margin-left: 80px;">The unit uses both oil and grease lubricated bearings: the drive (top) bearings use oil while the bearings at the opposite end (bottom) use grease. A closeup view of the top oil fill and drain can be viewed here:</p>
    <div class="img-container">
        <div>
            <img src="http://placehold.it/950x150"></img>
        </div>
    </div>
    <p class="course-caption">Oil Bearing Lubrication</p>
    <div class="img-container">
        <div>
            <img src="http://placehold.it/950x150"></img>
        </div>
    </div>
    <p class="course-caption">Oil Bearing Lubrication</p>
</div>

CSS

.content {
    background-color:black;
    width:768px;
    margin:0 auto;
}
.img-container > div {
    position:relative;
}
.img-container img {
    position:absolute;
    width:950px;
}

body {
    background-color:yellow;
    color:grey;
    width:1050px;
    display:block;
    margin:0 auto;
}

JS

$(".img-container").each(function () {
    $(this).css('height', $(this).children()[0].children[0].height + 'px');

});

$(".img-container > div > img").each(function () {
    var paddingValue = (Number($(".content").css('width').substring(0, $(".content").css('width').length - 2)) - this.width) / 2;
    $(this).parent().css('left', paddingValue);
});

* 正文 color显然设置只是为了让您可以看到父级之外的内容以及background-color在 .content *

工作 JSFiddle:http://jsfiddle.net/dmep9w6c/20/ * 已更新 *