Html 未应用Div样式

我正在处理一个小的日程安排示例，我已经构建了一个小的html示例，页面的头部有一个样式表

简单地说，它是一个包装器div，用作其他div的容器，这些div是计划项，这些项div中的每一项都由两个面组成；左浮动div和右浮动div

我面临的问题是设置这些浮动div的宽度，但是css没有被应用，而是从父div继承

以下是正在发生的事情的屏幕截图：

以下是我的示例代码：

CSS:

.HeaderDiv
{
}
.分离
{
明确：两者皆有；
}
.AgendaItemsContainerDiv
{
宽度：800px；
填充：25px 50px；
文本对齐：居中；
保证金：自动；
}
AgendaItemDiv
{
宽度：700px；
高度：200px；
明确：两者皆有；
}
.SpeakersContainerDiv
{
浮动：左；
宽度：200px；
}
.SpeakerItemDiv
{
浮动：左；
宽度：120px；
填充物：2个3个；
边际：0px；
}
SpeakerImgDiv先生
{
边框样式：实心；
边框宽度：1px；
宽度：120；
身高：120；
}
.SpeakerMoreInfoDiv
{
宽度：120；
}
.AgendaItemDetailsContainerDiv
{
浮动：对；
边际：0px；
填充：0px；
}
.AgendaItemTextDiv
{
弗洛尔：左；
位置：相对位置；
边际：0px；
填充：0px；
高度：自动；
右：90px；
}
.AgendaItemTextDiv>span
{
左侧填充：20px；
}
.AgendaItemrButtonsDiv
{
位置：相对位置；
底部：0px；
}

HTML:

这里是扬声器1图像
发言人信息
扬声器2图片在这里
发言人信息
此处的主题标题
有关此主题的详细信息
时间：10:15至10:30
更多信息。。。

我无法找出我的代码出了什么问题，我已经搜索了，并尝试了很多场景。但结果是一样的

---

如果我试图从浏览器中编辑css来设置宽度或浮动，div就会变得疯狂

我真的不明白您想要实现什么，但是如果您想要做的是按照下面的css声明将

AgendaItemDetailsContainerDiv

浮动到右侧

<!-- Agenda Item : text area -->
.AgendaItemDetailsContainerDiv
 {
      float: right;
      margin:0px;
      padding:0px;
  }

---

这同样适用于css样式表中所有其他格式不正确的注释

您的预期输出是什么？你能详细解释一下吗？在屏幕截图中，div不是浮动的，也没有大小，它的样式是从带有AgendaItemsContainerDiv类的div继承的，尽管它设置了一个类，左边的div是SpeakersContainerDiv，右边的是AgendaItemDetailsContainerDiv是的，没有意识到这会导致问题，它正在工作

    <div class="AgendaItemsContainerDiv">
    <!-- Agenda items container div-->

        <div class="AgendaItemDiv">
        <!-- Agenda item div -->

            <div class="SpeakersContainerDiv">
            <!-- Agenda speakers container div -->

                <div class="SpeakerItemDiv">
                    <!-- Speakers item div -->
                    <div class="SpeakerImgDiv">
                        <!-- Speaker img div -->
                        Speaker 1 Image here

                    </div>
                    <div class="SpeakerMoreInfoDiv">

                        Speaker info

                    </div>
                </div>

                <div class="SpeakerItemDiv">
                    <!-- Speakers item div -->
                    <div class="SpeakerImgDiv">
                        <!-- Speaker img div -->
                        Speaker 2 Image here

                    </div>
                    <div class="SpeakerMoreInfoDiv">

                        Speaker info

                    </div>
                </div>

            </div>

            <div class="AgendaItemDetailsContainerDiv">
            <!-- Agenda desc container div -->

                <div class="AgendaItemTextDiv">
                    <!-- Agenda header and details div -->
                    <h2>
                        Topic title here
                    </h2>
                    <span>
                        Details about this topic
                    </span>
                    <div>
                        Time, from: 10:15 to 10:30
                    </div>

                </div>

                <div class="AgendaItemrButtonsDiv">
                    <!-- Click for more info div -->
                    More Info...
                </div>

            </div>

        </div>

    </div>

<!-- Agenda Item : text area -->
.AgendaItemDetailsContainerDiv
 {
      float: right;
      margin:0px;
      padding:0px;
  }

/* Agenda Item : text area */
.AgendaItemDetailsContainerDiv
 {
     float: right;
      margin:0px;
      padding:0px;
  }