当前位置:Gxlcms > html代码 > 请教:div双列布局问题_html/css_WEB-ITnose

请教:div双列布局问题_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:121人阅读

div双列布局,外层width:500px;左列width:100px,右列width:100%;margin-left:150px;
预览效果为右列实际大小超出了外层div。

请教如何实现右列不超出外层div范围(要求不使用js,实际应用中外层会捕获window.resize()灵活指定宽度)。

  1. <style type="text/css">.div1{
  2. border: 1px solid black;
  3. width:500px;}.div2{
  4. width:100px;
  5. border: 1px solid blue;
  6. float:left;
  7. height:200px;}.div3{
  8. width:100%;
  9. border: 1px solid red;
  10. margin-left:102px;
  11. height:200px;}</style>
  12. <div class="div1">
  13. <div class="div2">div2</div>
  14. <div class="div3">div3</div>
  15. </div>


回复讨论(解决方案)

  1. .div3{
  2. border: 1px solid red;
  3. margin-left:102px;
  4. height:200px;}

width:100%;去掉

人气教程排行