Home > Web Front-end > HTML Tutorial > 新手求一个div排版_html/css_WEB-ITnose

新手求一个div排版_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:28:12
Original
1302 people have browsed it

一个自适应的排版,
排版方式是,要么两行两列显示图片和文字   要么一行四列显示图片文字  图片文字排版无所谓,就放图片下面就行。
主要是,如果屏幕比较宽,图片会跟着放大,如果小了,图片也小了。文字不变。求高手教我。
示例我画图说明


回复讨论(解决方案)

求大神指教 ,我不太擅长做div+css

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <style>        .div {            min-width:650px;            border:1px green solid;            height:400px;        }        .maxdiv {            border: 1px red solid;            height: 300px;            float:left;            width:48%;            min-width:300px;        }            .maxdiv div {                width: 40%;                height: 200px;                border: 1px red solid;                float: left;                margin: 4%;                min-width: 180px;            }    </style></head><body>    <div class="div">        <div class="maxdiv">            <div>            </div>            <div>            </div>        </div>        <div class="maxdiv">            <div>            </div>            <div>            </div>        </div>    </div></body></html>
Copy after login

可以自己改改样式和加文字

nbsp;html>

  


    
    
    Title
    
  
  
    

      

        

          新手求一个div排版_html/css_WEB-ITnose
          

1


        

        

          新手求一个div排版_html/css_WEB-ITnose
          

2


        

      

      

        

          新手求一个div排版_html/css_WEB-ITnose
          

3


        

        

          新手求一个div排版_html/css_WEB-ITnose
          

4


        

      

    

  

显示的4个小框的高度、宽度用占总宽度的百分比来做。

多写代码多试。

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template