HTML-调整div大小_Html_Css - Fatal编程技术网

HTML-调整div大小

html css

HTML-调整div大小,html,css,Html,Css,我有一个网页与下列部门的 <div id="main"> <div id=left></div> <div id=right></div> </div> 由于页面的主体是背景色蓝色，因此假设 div left和div right为白色。当say right div的内容到达 div main的高度，div main不展开所以看起来很奇怪当div向右扩展超过它时，如何获得div main expan

我有一个网页与下列部门的

<div id="main">
    <div id=left></div>
    <div id=right></div>
</div>

由于页面的主体是背景色蓝色，因此假设 div left和div right为白色。当say right div的内容到达 div main的高度，div main不展开所以看起来很奇怪

当div向右扩展超过它时，如何获得div main expand

希望这不会令人困惑

马尔科姆

我假设“左”和“右”意味着你用CSS将它们左右浮动

如果是这样，你需要这样做。使您的HTML如下所示：

<div id="main">
    <div id=left></div>
    <div id=right></div>
    <br style='clear: both;'>
</div>

<html>
<head>
<style>
#equal      {
        overflow: hidden;
        }

#left, #right{
        padding-bottom: 5000px;
        margin-bottom: -5000px;
        width: 150px;
        }

#left       {
        float: left;
        background-color: red;
        }

#right      {
        float: right;
        background-color: green;
        }
</style>
</head>
<body>
<div id="main">
<div id="equal">
<div id="left">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </div>
<div id="right">blah blah blah blah blah blah </div>
</div>
</div>
</body>
</html>

我假设“left”和“right”表示您使用CSS将它们左右浮动

如果是这样，你需要这样做。使您的HTML如下所示：

<div id="main">
    <div id=left></div>
    <div id=right></div>
    <br style='clear: both;'>
</div>

<html>
<head>
<style>
#equal      {
        overflow: hidden;
        }

#left, #right{
        padding-bottom: 5000px;
        margin-bottom: -5000px;
        width: 150px;
        }

#left       {
        float: left;
        background-color: red;
        }

#right      {
        float: right;
        background-color: green;
        }
</style>
</head>
<body>
<div id="main">
<div id="equal">
<div id="left">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </div>
<div id="right">blah blah blah blah blah blah </div>
</div>
</div>
</body>
</html>

您可以（需要）使用重置css文件来处理此类css问题。您可以看到有关雅虎重置css文件的详细信息

希望这有助于您可以（需要）使用重置css文件来处理此类css问题。您可以看到有关雅虎重置css文件的详细信息

希望这有帮助您的“左”和“右”div是否浮动？默认情况下，“main”div不会围绕其包含的浮动元素展开。您可以通过将

溢出：auto

添加到CSS中的

div#main

来解决此问题。

您的“左”和“右”div是否浮动？默认情况下，“main”div不会围绕其包含的浮动元素展开。您可以通过将

overflow:auto

添加到CSS中的

div#main

来解决此问题。

您可以尝试以下方法：

<div id="main">
    <div id=left></div>
    <div id=right></div>
    <br style='clear: both;'>
</div>

<html>
<head>
<style>
#equal      {
        overflow: hidden;
        }

#left, #right{
        padding-bottom: 5000px;
        margin-bottom: -5000px;
        width: 150px;
        }

#left       {
        float: left;
        background-color: red;
        }

#right      {
        float: right;
        background-color: green;
        }
</style>
</head>
<body>
<div id="main">
<div id="equal">
<div id="left">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </div>
<div id="right">blah blah blah blah blah blah </div>
</div>
</div>
</body>
</html>


#相等的{
溢出：隐藏；
}
#左，#右{
垫底：5000px；
边缘底部：-5000px；
宽度：150px；
}
#左{
浮动：左；
背景色：红色；
}
#对{
浮动：对；
背景颜色：绿色；
}
诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类
废话废话废话废话

您可以尝试以下方法：

<div id="main">
    <div id=left></div>
    <div id=right></div>
    <br style='clear: both;'>
</div>

<html>
<head>
<style>
#equal      {
        overflow: hidden;
        }

#left, #right{
        padding-bottom: 5000px;
        margin-bottom: -5000px;
        width: 150px;
        }

#left       {
        float: left;
        background-color: red;
        }

#right      {
        float: right;
        background-color: green;
        }
</style>
</head>
<body>
<div id="main">
<div id="equal">
<div id="left">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </div>
<div id="right">blah blah blah blah blah blah </div>
</div>
</div>
</body>
</html>


#相等的{
溢出：隐藏；
}
#左，#右{
垫底：5000px；
边缘底部：-5000px；
宽度：150px；
}
#左{
浮动：左；
背景色：红色；
}
#对{
浮动：对；
背景颜色：绿色；
}
诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类
废话废话废话废话

您应该为#main的CSS提供overflow:hidden属性。此外，您还应始终引用属性值。（将id分配给#左和#右时，您没有这样做）

您应该为#main的CSS提供overflow:hidden属性。此外，您还应始终引用属性值。（将id分配到#左侧和#右侧时，您没有这样做）

我添加了一个链接，解释它的作用。如果这不起作用，那么您需要粘贴您的CSS代码。为什么要使用BR标记？为什么不直接跳下去？甚至你发布的链接也在使用DIV。我添加了一个链接来解释它的作用。如果这不起作用，那么您需要粘贴您的CSS代码。为什么要使用BR标记？为什么不直接跳下去？甚至你发布的链接也在使用DIV。你可能应该重命名你的问题：“CSS-清除浮动”你可能应该重命名你的问题：“CSS-清除浮动”