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

WBOY
發布: 2016-06-24 11:37:21
原創
1667 人瀏覽過

两个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%;
登入後複製

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板