我正在处理一个小型日程安排示例，我已经在页面头部构建了一个带有阻碍样式表的小型 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 会发疯！

解决方案

我真的不明白你想要实现的目标，但如果你想要做的是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 样式表中所有其他格式不正确的注释