Home > Article > Web Front-end > 两个div并排，右边的div需要铺满剩余空间？_html/css_WEB-ITnose
两个div并排，右边的div需要铺满剩余空间？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:37:211657browse
两个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
回复讨论(解决方案)
你试试看div2右浮动，然后给两个div设置固定宽度，
div2 width: 85%;
你试试看div2右浮动，然后给两个div设置固定宽度，
右浮动？能给出具体的代码吗？
div2 width: 85%;
这个方法我用了，有没有更简便的方法？
第一种，都向左浮动， width 各占相应百分比（注意div1 ,div2 有padding margin 等属性会影响宽度 ）
两div高度可以不一样，
div1 15% + div1 85% = 100% 宽
第二种 仅div1 左浮动，div2 100%宽（不浮动）， div1 自然覆盖在div2上，再对div2做相应处理。
这种适合左边的高度 大于或等于右边的高度。
.div1 {
float: left; width: 15%;
background-color: lightseagreen;
}
.div2 {
width: 100%;
background-color: chocolate;
}
.div2增加属性
width: 85%;
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：什么是表现和内容分离_html/css_WEB-ITnoseNext article：CSS中*和body有什么区别_html/css_WEB-ITnose