Css 在html中调整div_Css_Html - Fatal编程技术网

Css 在html中调整div

css html

Css 在html中调整div,css,html,Css,Html,我是html新手。我想做如下简单的布局设计： ------------------------------------- | ------------------------------------- | | | | | | | | |

我是html新手。我想做如下简单的布局设计：

-------------------------------------
                                    |
-------------------------------------
    |                           |   |
    |                           |   |
    |                           |   |
    |                           |   |
    |---------------------------|   |
____|_________footer____________|___|

但我的页脚并没有在左右菜单之间调整。它位于左右菜单下方

下面是我的html代码：

<html>
<head>
<style>
#container {
    height: 100%;
    width: 100%;
    background-color: aqua;
    position: relative;
}

#header {
    height: 5%;
    background-color: #FFA500;
}

#leftmenu {
    background-color: #FFD700;
    height: 90%;
    width: 20%;
    float: left;
}

#rightmenu {
    background-color: #FFD700;
    height: 90%;
    width: 10%;
    float: left;
}

#content {
    style ="background-color: #EEEE12;
    height: 85%;
    width: 70%;
    float: left;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title><tiles:insertAttribute name="title" ignore="true"></tiles:insertAttribute>
</title>
</head>
<body>
    <div id="container" class=".container">

        <div id="header" class=".header">
            <h1>Main Title of Web Page</h1>
        </div>

        <div id="leftmenu" class=".leftmenu">
            <b>Menu</b><br> HTML<br> CSS<br> JavaScript
        </div>

        <div id="content" class=".content">Content goes here</div>

        <div id="rightmenu" class=".rightmenu">
            <b>DashBoard</b><br> Recent<br> Saved Search
        </div>

        <div id="footer"
            style="background-color: #FFA500; clear: both; text-align: center;">
            Copyright Â© W3Schools.com</div>

    </div>


</body>
</html>


#容器{
身高：100%；
宽度：100%；
背景色：浅绿色；
位置：相对位置；
}
#标题{
身高：5%；
背景色：#FFA500；
}
#左菜单{
背景色：#FFD700；
身高：90%；
宽度：20%；
浮动：左；
}
#右菜单{
背景色：#FFD700；
身高：90%；
宽度：10%；
浮动：左；
}
#内容{
style=“背景色：#EEEE12；
身高：85%；
宽度：70%；
浮动：左；
}
网页主标题
菜单
HTML
CSS
JavaScript
内容在这里
仪表板
最近保存的搜索
版权所有©W3Schools.com

因此，我在这里所做的是创建一个中间分区，其中包含您的内容和页脚

你中间的div有一个相对的位置，我绝对把你的页脚放在底部

请注意，中间的div需要一个高度才能工作。但这不应该是一个问题

如果你还需要什么，请告诉我

<div id="middle"> 
<div id="content" class=".content">Content goes here</div>
<div id="footer" style="background-color: #FFA500; clear: both; text-align: center;">
Copyright Â© W3Schools.com
</div>
</div>
</div>

#middle {float: left; width: 70%; height: 80px; position: relative;}
#footer {bottom: 0px; position: absolute; width: 100%}


内容在这里
版权所有©W3Schools.com
#中间{浮动：左侧；宽度：70%；高度：80px；位置：相对；}
#页脚{底部：0px；位置：绝对；宽度：100%}

这里有一把小提琴给你举个例子

您有一些问题

首先，你在

标记中混合了内联CSS和CSS。不要这样做，99.9%的时间都把它放在

标记中

其次，在CSS的一行中有一个

style=“…

”，可能是因为复制，所以我删除了它

第三，您需要设置页脚的宽度。因为两边的div都是30%的百分比，所以我将页脚改为宽度为70%

第四，您需要将其定位到左div的右侧。您可以使用左div的宽度

margin left:20%

最后，您需要将页脚向上放置在左侧和右侧div的旁边。通过使用我的浏览器inspect元素，我看到页脚是20px。因此，我给两边的div都

边距底部：-20px

，这样页脚上的

clear:float

就不会让它通过两个元素

虽然这不是我要做的，但它是有效的

这应该让你开始。我把你的页脚移到了

内容

div Is position:绝对安全，适合交叉浏览和移动？这是CSS的标准部分。将在每个浏览器/移动浏览器中工作。我不建议在所有事情上都使用它，但在这种情况下，它似乎很好。因为页脚只会绝对定位在中间部分，因为中间部分是相对定位的。这是我最有可能的方式。为了得到如此好和详细的解释。你的解释有助于理解事物。