61,115
社区成员
发帖
与我相关
我的任务
分享两个div并排，右边的div需要铺满剩余空间？
两个div并排，右边的div需要铺满剩余空间？该如何定义CSS
两个div并排，右边的div需要铺满剩余空间？该如何定义CSS
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title></title>
<%--<link rel="stylesheet" type="text/css" href="css/main.css">--%>
<style type="text/css">
.div1 {
background-color: lightseagreen;
width: 15%;
height: 100%;
float: left;
}
.div2 {
background-color: chocolate;
height: 100%;
float: left;
}
</style>
</head>
<body>
<div class="div1">
DIV1
</div>
<div class="div2">
DIV2
</div>
</body>
</html>
两个div并排，右边的div需要铺满剩余空间？该如何定义CSS
...全文
请发表友善的回复…
发表回复
化繁为简2007 2015-09-01
- 打赏
- 举报
.div2增加属性
width: 85%;
datarrow 2015-08-31
- 打赏
- 举报
第一种，都向左浮动， width 各占相应百分比（注意div1 ,div2 有padding margin 等属性会影响宽度 ）
两div高度可以不一样，
div1 15% + div1 85% = 100% 宽
<style>
.div1 {
float: left; width: 15%;
background-color: lightseagreen;
}
.div2 {
float: left; width: 85%;
background-color: chocolate;
}
</style>
第二种 仅div1 左浮动，div2 100%宽（不浮动）， div1 自然覆盖在div2上，再对div2做相应处理。
这种适合左边的高度 大于或等于右边的高度。
.div1 {
float: left; width: 15%;
background-color: lightseagreen;
}
.div2 {
width: 100%;
background-color: chocolate;
}
</style>
horse_leo_zhcn 2015-08-31
- 打赏
- 举报
这个方法我用了，有没有更简便的方法？
horse_leo_zhcn 2015-08-31
- 打赏
- 举报
右浮动？能给出具体的代码吗？
daswcszxw 2015-08-31
- 打赏
- 举报
div2 width: 85%;
David3b 2015-08-31
- 打赏
- 举报
你试试看div2右浮动，然后给两个div设置固定宽度，
