如何防止覆盖CSS

Question

我想要做的是能够在div中有两列。所以我可以随时插入一张图片，并将文字整齐地放在一边。

这是我的HTML：

<div id="content">
<div id="gallery">
    <h1>Gallery</h1>
    <div id="container">
        <div id="imageleft">
            <img src="images/pic1.jpg" width="150px" alt="Image" />
        </div>
        <div id="imageright">
            test
        </div>
    </div>
    <img src="images/pic2.jpg" width="150px" alt="Image" />
    <img src="images/pic3.jpg" width="150px" alt="Image" />
    <img src="images/pic4.jpg" width="150px" alt="Image" />
</div>
</div>

这是一个完美的JSFiddle

http://jsfiddle.net/RdyGM/1/

这是我实际看到的图像。紫色位应该是左边的50％。 （文本“测试”放在下面）。

经过检查，你可以看到它从其他地方获得宽度：@

如何使用我想要的CSS。

Answer 1

嗯，你可以做两件事。一般方法是尝试使您的CSS选择器更具体。所以你可以这样做：#gallery #content #imageleft，而不是只是 #imageleft，这应该使你的规则适用。另一种方法是将CSS #imageleft更改为：

#imageleft{
   ....
   width:50% !important;
   ....
}

Answer 2

你可以使用！important来告诉浏览器哪些CSS可以优先考虑 - 它可能会或者可能没有帮助......

#imageleft {
    float:left;
    width:50% !important;
    background:#c9c;
}

#imageright {
    float:right;
    width:50%  !important;
    background:#9c9;
}

Answer 3

domId.Attributes.Add("property of css", "Your css class name");