ホームページ >ウェブフロントエンド >htmlチュートリアル >div を探している初心者layout_html/css_WEB-ITnose
div を探している初心者layout_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2016-06-24 11:28:121337ブラウズ
一个自适应的排版，
排版方式是，要么两行两列显示图片和文字 要么一行四列显示图片文字 图片文字排版无所谓，就放图片下面就行。
主要是，如果屏幕比较宽，图片会跟着放大，如果小了，图片也小了。文字不变。求高手教我。
示例我画图说明
回复讨论(解决方案)
求大神指教 ，我不太擅长做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> 可以自己改改样式和加文字
76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
a80eb7cbb6fff8b0ff70bae37074b813
0015e8032e9966f0e962444b5d140ffc
b2386ffb911b14667cb8f0f91ea547a7Title6e916e0f7d1e588d4f442bf645aedb2f
c9ccee2e6ea535a969eb3f532ad9fe89
.fn-clear:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.fn-clear { zoom: 1; }
.content {width: 100%;}
.main {width: 48%; margin: 0 1%; float: left;}
.a,
.b {width: 48%; margin: 0 1%; float: left;}
.a img,
.b img { display: block; width: 100%;}
@media screen and (max-width: 800px) { .main {width: 98%;} } /*当浏览器宽度小于800px时加载此样式*/
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
961b7c1b4fd1d414a5a71479a7156b93
28a48771e698d5b1bbf98104eb227a87
c8aa27b89b06dcedfe1ad06787c3679d
b5cbb681f687162c14706e68b175cb45
e388a4556c0f65e1904146cc1a846bee194b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68
a8a95608263766f8267083a9314b93ef
b5cbb681f687162c14706e68b175cb45
e388a4556c0f65e1904146cc1a846bee294b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
28a48771e698d5b1bbf98104eb227a87
c8aa27b89b06dcedfe1ad06787c3679d
b5cbb681f687162c14706e68b175cb45
e388a4556c0f65e1904146cc1a846bee394b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68
a8a95608263766f8267083a9314b93ef
b5cbb681f687162c14706e68b175cb45
e388a4556c0f65e1904146cc1a846bee494b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
表示される 4 つの小さなボックスの高さと幅は、合計幅のパーセンテージとして計算されます。
さらにコードを書いて、さらに試してください。