Div样式不适用

Question

我正在制作一个小型的日程安排示例，我在页面的头部构建了一个带有阻碍样式表的小型html示例。

简单地说，它是一个包装div，作为其他div的容器，这些div是计划项目，这些项目中的每一个div都包含两个方面;左浮动div和右浮动div

我面临的问题是设置那些浮动div的宽度，但是没有应用css，并且它是从父div继承的。

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

这是我的示例代码：

CSS：

        .HeaderDiv
        {

        }

        .SeparatorDiv
        {
            clear: both;
        }

        .AgendaItemsContainerDiv
        {
            width:800px;
            padding:25px 50px;
            text-align:center;
            margin:auto;
        }

        .AgendaItemDiv
        {
            width: 700px;
            height: 200px;
            clear: both;
        }

            <!-- Agenda Item : speakers area -->

            .SpeakersContainerDiv
            {
                float:left;
                width: 200px;
            }

            .SpeakerItemDiv
            {
                float:left;
                width:120px;
                padding:2px 3px;
                margin:0px;
            }

            .SpeakerImgDiv
            {
                border-style:solid;
                border-width:1px;
                width: 120;
                height: 120;
            }

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

            .AgendaItemTextDiv
            {
                floar: left;
                position:relative;
                margin:0px;
                padding:0px;
                height:auto;
                right: 90px;
            }

            .AgendaItemTextDiv > span
            {
                padding-left:20px;
            }

            .AgendaItemrButtonsDiv
            {
                position:relative;
                bottom: 0px;
            }

HTML：

    <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>

我无法弄清楚我的代码有什么问题，我已经搜索过，并尝试过很多场景。但结果相同。

如果我尝试从浏览器编辑我的CSS来设置宽度或浮动，那么div就会疯狂！

Answer 1

我真的不明白你想要达到的目的但是如果你要做的是将AgendaItemDetailsContainerDiv浮动到右边，按照下面的css声明......

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

你只需删除你在css类声明上面添加的文本，因为它不是一个正确的css注释。这就是为什么风格没有应用。您使用正确的css注释块如下...

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

这同样适用于css样式表中所有其他格式错误的评论