Rumah > Artikel > hujung hadapan web > 两个div并排，右边的div需要铺满剩余空间？_html/css_WEB-ITnose
两个div并排，右边的div需要铺满剩余空间？_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 11:37:211658semak imbas
两个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%;
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：什么是表现和内容分离_html/css_WEB-ITnoseArtikel seterusnya：CSS中*和body有什么区别_html/css_WEB-ITnose