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

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

WBOY
WBOYOriginal
2016-06-24 11:34:221113browse

 



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

谢谢各位了 问题解决了

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn