0

我有一段：

<body>
<div id="attachment_839" class="wp-caption aligncenter" style="width: 462px">
<p class="wp-caption-text">Pargraph text which is much wider than 270px</p>
</div>
<body>

并应用样式：

body{
    width:270px !important; 
}

问题是：

为什么这一段太宽了？由于!important用于以我的方式覆盖以前的设置和样式页面。

为了解决这个问题，我添加了以下代码：

.wp-caption-text {
     width: 270px ! important;
}

它已被证明并且有效，但为什么不!important覆盖以前的宽度？我该怎么做才能找到可能的答案？

4

2 回答 2

4

没有声明宽度的段落<p>占据了父容器的整个宽度（因为默认auto）。

在您定义了宽度的情况下 - 它脱离了父级。

演示

如果您style="width: 462px"从您的div- 它不会再破坏布局

于 2012-11-09T12:29:46.117 回答
0

这个问题已经回答了，我只是添加我的观察。

我尝试了有问题的代码，发现段落宽度为 270px，而 div 宽度为 420px。所以没有使用 !important 进行覆盖。

!imporatant只能覆盖外部样式，不能覆盖任何内联样式。在这种情况下，我们将 div 的宽度声明为内联样式。所以如果我们在.wp-caption类声明和 use中添加宽度!important，这不会影响 div 的宽度。

为了验证宽度，我在段落和 div 中添加了边框。下面是定义的样式。

<style type="text/css">
body{
    width:270px !important; 
}
.wp-caption-text {
     width: 270px !important;
     border: 1px dotted green;
}
.wp-caption
{
    border: 1px dotted blue;
}
</style>

屏幕截图显示了段落宽度和 div 宽度。 在此处输入图像描述

于 2012-11-09T12:54:42.377 回答