gpt4 book ai didi

html - 如何将子div设置为自动宽度父

转载 作者:太空宇宙 更新时间:2023-11-04 03:34:10 25 4
gpt4 key购买 nike

我有一个 HTML 页面,它分为页眉、主要部分和页 footer 分。

下面我提到了 HTMLCSS 代码。

HTML 代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="icon" type="image/ico" href="/static/images/favicon.ico">
<link rel="stylesheet" type="text/css" href="/static/css/eGirvi.css">
<title>eGirvi ERP for jewellers</title>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="logo">
<img src="/media/logo.png">
</div>
</div>
<div id="main">
<div id="content">content</div>
<div id="right-sidebar">right-sidebar</div>
</div>
</div>
<div id="footer">Footer</div>
</body>
</html>

CSS 代码:

/*Header div start here*/
#header{
border: 1px dotted;
height: 100px;
}
/*Header div end here*/

/*Logo start here*/
#logo{
width: 100px;
height: 100px;
}
/*Logo start here*/

/*Main start here*/
#main{
min-height: 800px;
border: 2px solid;
}
/*main end here*/

/*content start here*/
#content{
min-height: 800px;
border: 2px dashed;
float: left;
}
/*content end here*/

/*right-sidebar start here*/
#right-sidebar{
min-height: 800px;
width: 100px;
border: 2px solid;
float: right;
}
/*right-sidebar end here*/

/*footer start here*/
#footer{
clear: both;
border: 1px dotted;
height: 100px;
}
/*footer end here*/

我想做的是将“内容”div 设置为页面的剩余宽度,即 (总页面宽度减去右侧栏的宽度)。有人可以帮帮我吗。

最佳答案

链接:CSS Auto Width Child 'div's in Parent 'div'

HTML

<div class="parent">
<div class="child">...</div>
<div class="child">...</div>
<div class="child">...</div>
</div>

CSS

.parent
{
display: table-row;
width: 900px;
}
.child
{
display: table-cell;
}

关于html - 如何将子div设置为自动宽度父,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25820480/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com