本站消息

站长简介/公众号


站长简介:高级软件工程师,曾在阿里云,每日优鲜从事全栈开发工作,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

未应用 div 样式

发布于2022-01-13 05:06     阅读(1019)     评论(0)     点赞(2)     收藏(1)


我正在处理一个小型日程安排示例,我已经在页面头部构建了一个带有阻碍样式表的小型 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 样式表中所有其他格式不正确的注释




所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/286001/f825a86ff3775cb05e8d/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

2 0
收藏该文
已收藏

评论内容:(最多支持255个字符)