Home > Article > Web Front-end > 初学css,怎么能获得这样的效果，调试了半天，都不行，请高人指点下！_html/css_WEB-ITnose
初学css,怎么能获得这样的效果，调试了半天，都不行，请高人指点下！_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 08:52:471001browse
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Basic Tabs - jQuery EasyUI Demo</title> <style type="text/css">.divtop{ padding: 10px; background: black;}.divquery{ background: blue; height:200px; float:left;}.divbtn{ float:left; width:120px; background: red; height:200px;}.qitem { display:inline-block; line-height:30px; text-align:right; width:250px; height:25px; overflow:hidden; background: green;}</style></head><body> <div class="divtop"> <div class="divquery"> <span class="qitem"> </span> <span class="qitem"> </span> <span class="qitem"> </span> <span class="qitem"> </span> <span class="qitem"> </span> </div> <div class="divbtn"> </div> </div></body></html> 我想实现的效果是，
1.红色的div和蓝色的div并列，当页面宽度变化的时候，红色的div的宽度固定，蓝色的div宽度自适应
2.绿色的div宽度固定，当宽度不够的时候，绿色的div能换行排列，现在这个没问题
现在的情况是，红色的div经常跑到蓝色下面去，如图:
请教如何调整？另外，黑色的div为什么只显示那么一点点?不是应该把蓝色和红色都覆盖吗？他是最顶层的div啊？
回复讨论(解决方案)
红色div float:right
红色div float:right
不行呢，换成right,还是在下面，只是变成靠右边了
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Basic Tabs - jQuery EasyUI Demo</title> <style type="text/css">.divtop{ padding: 10px; background: black;}.divquery{ background: blue; height:200px; float:left; width:80%}.divbtn{ float:left; width:20%; background: red; height:200px;}.qitem { display:block; line-height:30px; text-align:right; width:15%; float:left; height:25px; overflow:hidden; background: green; margin:0.4rem;}</style></head><body> <div class="divtop"> <div class="divquery"> <span class="qitem"> </span> <span class="qitem"> </span> <span class="qitem"> </span> <span class="qitem"> </span> <span class="qitem"> </span> <span class="qitem"> </span> <span class="qitem"> </span> </div> <div class="divbtn"> </div> </div></body></html> 定义宽度
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Basic Tabs - jQuery EasyUI Demo</title> <style type="text/css">.divtop{ padding: 10px; background: black;}.divquery{ background: blue; height:200px; float:left; width:80%}.divbtn{ float:left; width:20%; background: red; height:200px;}.qitem { display:block; line-height:30px; text-align:right; width:15%; float:left; height:25px; overflow:hidden; background: green; margin:0.4rem;}</style></head><body> <div class="divtop"> <div class="divquery"> <span class="qitem"> </span> <span class="qitem"> </span> <span class="qitem"> </span> <span class="qitem"> </span> <span class="qitem"> </span> <span class="qitem"> </span> <span class="qitem"> </span> </div> <div class="divbtn"> </div> </div></body></html> 定义宽度
谢谢！但是我不想定义divquery的宽度，因为我已经制定了divbtn的宽度，那么divquery的宽度就是剩余的部分了，如果指定宽度，或者用百分比，可能会导致页面有留白的部分,我希望他们能无缝的合并在一起呢
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Basic Tabs - jQuery EasyUI Demo</title> <style type="text/css">.divtop{ padding: 10px; padding-right:130px; background: black; overflow:hidden; position:relative;}.divquery{ background: blue; height:200px; float:left;}.divbtn{ float:left; width:120px; background: red; height:200px; right:10px; position:absolute;}.qitem { display:inline-block; line-height:30px; text-align:right; width:250px; height:25px; overflow:hidden; background: green;} </style> </head><body> <div class="divtop"> <div class="divquery"> <span class="qitem"> </span> <span class="qitem"> </span> <span class="qitem"> </span> <span class="qitem"> </span> <span class="qitem"> </span> </div> <div class="divbtn"> </div> </div> </body></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
Previous article：css中的z-index_html/css_WEB-ITnoseNext article：页面列表闭合与展开效果出不来，求救_html/css_WEB-ITnose