Question

我有一个页面，我正在尝试使用大量的CSS。我有一个主要的包装类，包含背景和所有内容，然后是内容类。在内容类中，我有各种文章的ID。在其中一些文章中，我希望图像与右边对齐，但我似乎无法做到这一点。据我所知

<div class="article">           
    In 1904, Sunderland's management was embroiled in a payment scandaat he would repay the money after his benthe money, claiming it had been a gift. An investigation conducted by the as part of a "re-signing/win/draw bonus", which violated the Association's rules. Sunderland were fined £250 (£20 thousand today), and six directors were suspended for two and a half years for not showing a true record of the club's
    <div class="picha">
            <img src="image/test.png">
    </div>
    </a>
</div>

应该将picha（即右对齐，设置边框）应用于图像......但它不会。

这是如何处理的？或者更好的是，有没有办法为ID中的图像设置规则，而不是专门用于图像？即文本以单向处理，但在该id中发布的所有图像都得到特殊处理。

编辑 - 如此更新的尝试： css有：

div.article {

    border: solid;
    background-color:red;
    }

div.article img{ 
    border: 10px solid #f1f1f1;
    float: right;
    }

和页面有：

 <div class="article"> 
 <a name="article1">
             random text
        <img src="image/test.png">
</a>
</div>

图像显示并且正确对齐，但是在文本下方和文本框外面，我非常喜欢它在文章框内，但在右边。如果我向文本添加浮动，则文章框会拉伸，但图像仍然在文本下方。

编辑2-我是一个愚蠢的新手。不得不在文本之前有图像。完成！

Answer 1

如果你想访问这个嵌套的div，你可以像@Aquillo那样说。

或者这样做：

.article .picha
{
 /*Your css*/

}

和

.article .picha img
{
 /*Your img css*/

}

Answer 2

你为什么不用？：

div.article {
    // This applies to all content
}

div.article img {
    // This applies to the image
}

div.article span {
    // This applies to everything inside a span
}

你可以在这样的范围内写下你的文字：

<div class='article'>
    <img src='' />
    <span>My text</span>
</div>

这样您就不需要为div打包image。

类中的CSS类

2 个答案: