两个div并排，右边的div需要铺满剩余空间？_html/css

两个div并排，右边的div需要铺满剩余空间？_html/css_WEB-ITnose

WBOY

풀어 주다： 2016-06-24 11:37:21

원래의

1645명이 탐색했습니다.

两个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;
}