Question

更新：我已尝试过以下建议，但我仍面临同样的问题。我编辑了下面的代码以反映新的样式表。如果有帮助，相关网页为http://japanesenostalgiccar.com/2011/05/06/friday-video-nissan-cedrics-vs-s30-fairlady-z/

在我的wordpress博客中，我正在尝试创建一个样式表，其中图像或嵌入的YouTube视频宽度为640px，而其下方的文本只有600px宽。

wordpress生成的HTML如下所示：

<div class="entry-content">
    <p>
        <a href="uploads/2011/05/ball.jpg">
            <img class="alignnone size-large wp-image-15139" width="640" height="211"
                src="uploads/2011/05/ball.jpg" title="Ball" />
        </a>
        This is a baseball.
    </p>
</div>

我的外部CSS文件包含以下内容：

.entry-content p{
    overflow: visible !important;
    padding : 0px 20px 0px 20px;
}

.entry-content p .alignnone, iframe{
    overflow: visible !important;
    width   : 640px !important;
    padding : 0px !important;
}

img.alignnone.size-large{
    overflow: visible !important;
    width: 640px !important;
    padding : 0px !important;
}

但是，图像（和文本）始终显示为600px，而嵌入的YouTube视频（使用iframe标记）显示为640px。

认为这是一个特殊性问题，我甚至添加了

style="width: 640px;"

作为IMG属性，但没有骰子。提前谢谢。

Answer 1

你在“尺寸大”的图像上有另一个课程 - 你是否检查过该风格对图像的影响？这种风格可能包含“！important”声明吗？

Answer 2

我不知道你img上的其他课程在做什么，但也许你可以尝试这样的事情：

img.alignnone.size-large {width: 640px !important;}

Answer 3

简单：

.entry-content p .alignnone, iframe{
    width   : 640px;
}

这将获取p的子元素，并将其设置为640px;

但是，您可能需要设置

.entry-content p{
overflow-x:visible
}

Answer 4

根据您的更新，我查看了相关页面。我想我可能会给你答案。

从第778行开始查看主题“TwentyTen”正在插入的样式：

/*
Resize images to fit the main content area.
- Applies only to images uploaded via WordPress by targeting size-* classes.
- Other images will be left alone. Use "size-auto" class to apply to other images.
*/
img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img {
    max-width: 100%; /* When images are too wide for containing element, force them to fit. */
    height: auto; /* Override height to match resized width for correct aspect ratio. */
}

'max-width：100％;'线似乎是问题。使用Firebug，我只是将这种风格关闭了一秒钟，而日产的照片则全速拍摄。所以要解决它，你应该能够将它添加到你自己的样式表中：

max-width: none;

我希望这会有所帮助!!

Answer 5

由于段落标记上的填充，图像宽度仅为600px。

如果要以640px显示图像和iframe，可以添加以下内容：

到图片：

img {
  margin: 0 -20px;
  display: block;
}

到iframe：

iframe {
  margin: 0 -20px;
}

Answer 6

您是否尝试将div的i.e.标签分隔为＆包含图像/视频的＆下方的文本？保持容纳（iframe和文本）的容器一致。将div分隔为容器的内部元素是更好的选择。

CSS如何覆盖外部样式表中的父样式？

6 个答案: