html div 上左右布局 右侧布满

html div 上左右布局 右侧布满,第1张

刚才看错了 你这颜色选得,我辨色能力没那么强。左右布局的div两个加一起的宽度不能大于父容器的宽度,要不然会出现换行的现象的。

#div_aside {

    float: left

    width: 20%

    height: 100%

    background-color: aliceblue

}

#div_general_report {

    float:left

    width:80%

    height:100%

    background-color: aqua

}

这样就行了

1、浮动布局:

<style>

html,body{margin:0 padding:0}

.div1 {float:left width:80% height:600px background-color:red}

.div2 {float:left width:80% background-color:green}

.div3 {float:right width:20% background-color:blue}

</style>

<div class="div1">宽80%,高600px</div>

<div class="div3">宽20%,高随内容</div>

<div class="div2">宽80%,高随内容</div>

<br style="clear:both"/>

2、绝对定位:

<style>

html,body{margin:0 padding:0}

.div1 {position:absolute left:0 top:0 width:80% height:600px background-color:red}

.div2 {position:absolute left:0 top:600px width:80% background-color:green}

.div3 {position:absolute right:0 top:0 width:20% background-color:blue}

</style>

<div class="div1">宽80%,高600px</div>

<div class="div2">宽80%,高随内容</div>

<div class="div3">宽20%,高随内容</div>

3、flex布局:

<style>

html,body{margin:0 padding:0}

.box {display:flex align-items:flex-start}

.left {display:flex flex-direction:column flex:0 1 80%}

.div1 {flex:0 1 600px background-color:red}

.div2 {flex:auto background-color:green}

.right {flex:auto background-color:blue}

</style>

<div class="box">

   <div class="left">

      <div class="div1">宽80%,高600px</div>

      <div class="div2">宽80%,高随内容</div>

   </div>

   <div class="right">宽20%,高随内容</div>

</div>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7291401.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-03
下一篇 2023-04-03

发表评论

登录后才能评论

评论列表(0条)

保存