Maison > interface Web > tutoriel HTML > 多个div嵌套,可是一直无法实现图中效果,求赐教_html/css_WEB-ITnose

多个div嵌套,可是一直无法实现图中效果,求赐教_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:34:22
original
1213 Les gens l'ont consulté

 



img


img


img








left

middle

right


    


css代码如下:
.content{
width:836px;
height:854px;
background:#DDDDDD;
    margin:0 auto;
}
.content.content_1{
width:398px;
height:494px;
background:#9900FF;
float:left;
}
.content.content_2{
width:398px;
height:494px;
background:#660077;
float:right;
}
是哪里写的不对吗 为什么一直无法实现效果图啊


回复讨论(解决方案)

.conte nt .content_1
少了空格

布局没有规划好
只说中间内容部分
首先content整体分为上下两个部分


      

      


然后content_1部分又分左右两部分

      

        

        

      

      


接着content_1_left分三层即3个div

          

          

          


然后每层分左右部分就是两个div啦~

          

              

              

          

          

          

 

content_1_right部分同理
content_2也应该能明白怎么做了吧~
整体布局贴给你 

      

        

          

            

            

          

          

          

        

        

          

          

          

        

      

      

        

        

        

      

    

最后  还有你写样式时 两个类名直接一定要空格 .content /*空格*/ .content_1

楼上回答都不错,楼主还没结贴么

少个空格,这不是我常犯的错误嘛。。。

你就只弄了content_1,content_2的样式,而且你要直接连接在一起的是父子元素才行,你这个中间还有个div,你其他样式都没弄,先去看看css基础吧,比你现在着急弄好多了http://www.runoob.com/css/css-tutorial.html

谢谢各位了 问题解决了

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal