Question

我正在尝试修改网站上的内容以降低每行的字符数而不更改字体大小。为此，我想让内容容器宽度更低。目前宽度为984px，我将降低到757px。

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

以下是一些代码示例。内容来自课程，其中有很多内容，因此编辑所有课程内容是不可行的。我需要采用现有的样式来进行这些更改。

<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/ *更新*

允许HTML内容延伸超过父级的宽度

1 个答案:

HTML

CSS

JS