Heim > Web-Frontend > HTML-Tutorial > 新手求一个div排版_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-24 11:28:12
Original
1306 Leute haben es durchsucht

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


回复讨论(解决方案)

求大神指教 ,我不太擅长做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>
Nach dem Login kopieren

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

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个小框的高度、宽度用占总宽度的百分比来做。

多写代码多试。

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage