Heim >Web-Frontend >HTML-Tutorial >求教div结合css布局问题_html/css_WEB-ITnose
求教div结合css布局问题_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:21:33905Durchsuche
CSS 布局 div HTML
<html><head> <title>无标题</title> <style type="text/css"> .hbox{ } .vbox{ } </style><body> <div width="100%" height="100%" class="hbox"> <div width="50%" height="100%" class="vbox"> <img src="mr.jpg" style="max-width:90%" style="max-width:90%"/ alt="求教div结合css布局问题_html/css_WEB-ITnose" > <img src="mr.jpg" style="max-width:90%" style="max-width:90%"/ alt="求教div结合css布局问题_html/css_WEB-ITnose" > </div> <div width="50%" height="100%" class="hbox"> <img src="mr.jpg" style="max-width:90%" style="max-width:90%"/ alt="求教div结合css布局问题_html/css_WEB-ITnose" > <img src="mr.jpg" style="max-width:90%" style="max-width:90%"/ alt="求教div结合css布局问题_html/css_WEB-ITnose" > </div> </div></body></html> 效果是下面这种样子，首先水平布局分两栏，然后左边是垂直布局，右边是水平布局，如何写css？
回复讨论(解决方案)
补充下效果图：
<!DOCTYPE html><html> <head> <style> .content{ width:300px; height:200px; border:solid 1px red; } .contentLeft{ float:left; width:33%; height:100%; border-right:solid 1px #ccc; } .leftTop{ width:100%; height:50%; border-bottom:solid 1px black; } .leftbottom{ width:100%; height:50%;} </style> </head> <body> <div class="content"> <div class="contentLeft"> <div class="leftTop"></div> <div class="leftbottom"></div> </div> <div class="contentLeft"></div> <div class="contentLeft"></div> </div> </body></html> 可不可以只设置两个样式就完成这种效果，一个是水平的样式，一个是垂直的样式，基于我代码中的那样？
自己修改一下
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <script src="../Res/Script/jquery-1.9.1.js"></script> <style type="text/css"> * { margin:0px; padding:0px; } .hbox { height: 50%; width: 100%; float:left; } .vbox { width: 50%; height: 100%; float:left; } </style></head><body> <div width="100%" height="100%" class="hbox" style=" background:#c8f3f3"> <div width="50%" height="100%" class="vbox"> <div style="background: #808080" class="hbox" >A</div> <div style="background: #2aac3c" class="hbox">B</div> </div> <div width="50%" height="100%" class="vbox"> <div style="background: #ffd800" class="vbox">C</div> <div style="background: #ff0000" class="vbox">D</div> </div> </div></body></html> 搞定了，谢谢qq290032431和w_mojian180！
Stellungnahme：
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
Vorheriger Artikel：chrome html 用纯javascript 遍历文件夹结构_html/css_WEB-ITnoseNächster Artikel：看看这个效果是用什么软件或技术实现的？_html/css_WEB-ITnose