Css 根据其内容调整div高度
我正在制作巨型菜单。我在安排div时遇到了麻烦 以下是HTML：Css 根据其内容调整div高度,css,html,drop-down-menu,megamenu,Css,Html,Drop Down Menu,Megamenu,我正在制作巨型菜单。我在安排div时遇到了麻烦 以下是HTML： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Mega Menu
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mega Menu Layout Test</title>
<style>
h1
{
margin:0px;
font-size:16px;
}
.wrapper
{
position:absolute;
width:400px;
background:#CCC;
}
.category
{
float:left;
margin:10px;
width:180px;
}
.subcategory
{
}
</style>
</head>
<body>
<div class="wrapper" >
<div class="category">
<h1>Lorem Ipsum 1</h1>
</div>
<div class="category">
<h1>Lorem Ipsum 2</h1>
</div>
<div class="category">
<h1>Lorem Ipsum 3</h1>
<div>
<a href="#" style="display:block;">Dolor Sit Amet</a>
</div>
</div>
<div class="category">
<h1>Lorem Ipsum 4</h1>
<div>
<a href="#" style="display:block;">Dolor Sit Amet</a>
<a href="#" style="display:block;">Consectetuer</a>
<a href="#" style="display:block;">Adipiscing Elit</a>
</div>
</div>
<div class="category">
<h1>Lorem Ipsum 5</h1>
</div>
<div class="category">
<h1>Lorem Ipsum 6</h1>
<div>
<a href="#" style="display:block;">Dolor Sit Amet</a>
<a href="#" style="display:block;">Phasellus Congue</a>
<a href="#" style="display:block;">Fringilla Accumsan</a>
<a href="#" style="display:block;">Praesent aliquam</a>
<a href="#" style="display:block;">Suspendisse non purus</a>
</div>
</div>
<div class="category">
<h1>Lorem Ipsum 7</h1>
<div>
<a href="#" style="display:block;">Dolor Sit Amet</a>
<a href="#" style="display:block;">Consectetuer</a>
<a href="#" style="display:block;">Adipiscing Elit</a>
</div>
</div>
<div class="category">
<h1>Lorem Ipsum 8</h1>
<div>
<a href="#" style="display:block;">Dolor Sit Amet</a>
<a href="#" style="display:block;">Consectetuer</a>
<a href="#" style="display:block;">Adipiscing Elit</a>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mega Menu Layout</title>
<style>
h1
{
margin:0px;
font-size:16px;
}
.wrapper
{
position:absolute;
width:400px;
background:#CCC;
}
.category
{
float:left;
margin:10px;
width:90%;
}
.col
{
float:left;
width:45%
}
</style>
</head>
<body>
<div class="wrapper" >
<div class="col">
<div class="category">
<div>
<h1>Lorem Ipsum 1</h1>
</div>
</div>
<div class="category">
<div>
<h1>Lorem Ipsum 2</h1>
</div>
</div>
<div class="category">
<div>
<h1>Lorem Ipsum 3</h1>
<a href="#" style="display:block;">Dolor Sit Amet</a>
</div>
</div>
<div class="category">
<div>
<h1>Lorem Ipsum 4</h1>
<a href="#" style="display:block;">Dolor Sit Amet</a>
<a href="#" style="display:block;">Consectetuer</a>
<a href="#" style="display:block;">Adipiscing Elit</a>
</div>
</div>
</div>
<div class="col">
<div class="category">
<div>
<h1>Lorem Ipsum 5</h1>
</div>
</div>
<div class="category">
<div>
<h1>Lorem Ipsum 6</h1>
<a href="#" style="display:block;">Dolor Sit Amet</a>
<a href="#" style="display:block;">Phasellus Congue</a>
<a href="#" style="display:block;">Fringilla Accumsan</a>
<a href="#" style="display:block;">Praesent aliquam</a>
<a href="#" style="display:block;">Suspendisse non purus</a>
</div>
</div>
<div class="category">
<div>
<h1>Lorem Ipsum 7</h1>
<a href="#" style="display:block;">Dolor Sit Amet</a>
<a href="#" style="display:block;">Consectetuer</a>
<a href="#" style="display:block;">Adipiscing Elit</a>
</div>
</div>
<div class="category">
<div>
<h1>Lorem Ipsum 8</h1>
<a href="#" style="display:block;">Dolor Sit Amet</a>
<a href="#" style="display:block;">Consectetuer</a>
<a href="#" style="display:block;">Adipiscing Elit</a>
</div>
</div>
</div>
</div>
</body>
</html>
超级菜单布局测试
h1
{
边际：0px；
字体大小：16px；
}
.包装纸
{
位置：绝对位置；
宽度：400px；
背景：#CCC；
}
类别
{
浮动：左；
利润率：10px；
宽度：180px；
}
.子类别
{
}
同侧眼底1
同侧视野2
同侧视野3
同侧视野4
同侧视野5
同侧视野6
同侧视野7
同侧眼底8
div的固定高度
如何消除Lorem Ipsum 3和Lorem Ipsum 5之间的空白是更好的方法Lorem Ipsum 5和Lorem Ipsum 7 我会删除空格，是的。另一种方式是，你需要为每一行添加一些包装div。我会删除空格，是的。另一方面，您需要为每一行添加一些包装div。我回答自己的问题：
（1） 困难的方法：使用
（2） 简单方法：为每个列添加新的div，下面是HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mega Menu Layout Test</title>
<style>
h1
{
margin:0px;
font-size:16px;
}
.wrapper
{
position:absolute;
width:400px;
background:#CCC;
}
.category
{
float:left;
margin:10px;
width:180px;
}
.subcategory
{
}
</style>
</head>
<body>
<div class="wrapper" >
<div class="category">
<h1>Lorem Ipsum 1</h1>
</div>
<div class="category">
<h1>Lorem Ipsum 2</h1>
</div>
<div class="category">
<h1>Lorem Ipsum 3</h1>
<div>
<a href="#" style="display:block;">Dolor Sit Amet</a>
</div>
</div>
<div class="category">
<h1>Lorem Ipsum 4</h1>
<div>
<a href="#" style="display:block;">Dolor Sit Amet</a>
<a href="#" style="display:block;">Consectetuer</a>
<a href="#" style="display:block;">Adipiscing Elit</a>
</div>
</div>
<div class="category">
<h1>Lorem Ipsum 5</h1>
</div>
<div class="category">
<h1>Lorem Ipsum 6</h1>
<div>
<a href="#" style="display:block;">Dolor Sit Amet</a>
<a href="#" style="display:block;">Phasellus Congue</a>
<a href="#" style="display:block;">Fringilla Accumsan</a>
<a href="#" style="display:block;">Praesent aliquam</a>
<a href="#" style="display:block;">Suspendisse non purus</a>
</div>
</div>
<div class="category">
<h1>Lorem Ipsum 7</h1>
<div>
<a href="#" style="display:block;">Dolor Sit Amet</a>
<a href="#" style="display:block;">Consectetuer</a>
<a href="#" style="display:block;">Adipiscing Elit</a>
</div>
</div>
<div class="category">
<h1>Lorem Ipsum 8</h1>
<div>
<a href="#" style="display:block;">Dolor Sit Amet</a>
<a href="#" style="display:block;">Consectetuer</a>
<a href="#" style="display:block;">Adipiscing Elit</a>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mega Menu Layout</title>
<style>
h1
{
margin:0px;
font-size:16px;
}
.wrapper
{
position:absolute;
width:400px;
background:#CCC;
}
.category
{
float:left;
margin:10px;
width:90%;
}
.col
{
float:left;
width:45%
}
</style>
</head>
<body>
<div class="wrapper" >
<div class="col">
<div class="category">
<div>
<h1>Lorem Ipsum 1</h1>
</div>
</div>
<div class="category">
<div>
<h1>Lorem Ipsum 2</h1>
</div>
</div>
<div class="category">
<div>
<h1>Lorem Ipsum 3</h1>
<a href="#" style="display:block;">Dolor Sit Amet</a>
</div>
</div>
<div class="category">
<div>
<h1>Lorem Ipsum 4</h1>
<a href="#" style="display:block;">Dolor Sit Amet</a>
<a href="#" style="display:block;">Consectetuer</a>
<a href="#" style="display:block;">Adipiscing Elit</a>
</div>
</div>
</div>
<div class="col">
<div class="category">
<div>
<h1>Lorem Ipsum 5</h1>
</div>
</div>
<div class="category">
<div>
<h1>Lorem Ipsum 6</h1>
<a href="#" style="display:block;">Dolor Sit Amet</a>
<a href="#" style="display:block;">Phasellus Congue</a>
<a href="#" style="display:block;">Fringilla Accumsan</a>
<a href="#" style="display:block;">Praesent aliquam</a>
<a href="#" style="display:block;">Suspendisse non purus</a>
</div>
</div>
<div class="category">
<div>
<h1>Lorem Ipsum 7</h1>
<a href="#" style="display:block;">Dolor Sit Amet</a>
<a href="#" style="display:block;">Consectetuer</a>
<a href="#" style="display:block;">Adipiscing Elit</a>
</div>
</div>
<div class="category">
<div>
<h1>Lorem Ipsum 8</h1>
<a href="#" style="display:block;">Dolor Sit Amet</a>
<a href="#" style="display:block;">Consectetuer</a>
<a href="#" style="display:block;">Adipiscing Elit</a>
</div>
</div>
</div>
</div>
</body>
</html>
超大菜单布局
h1
{
边际：0px；
字体大小：16px；
}
.包装纸
{
位置：绝对位置；
宽度：400px；
背景：#CCC；
}
类别
{
浮动：左；
利润率：10px；
宽度：90%；
}
上校
{
浮动：左；
宽度：45%
}
同侧眼底1
同侧视野2
同侧视野3
同侧视野4
同侧视野5
同侧视野6
同侧视野7
同侧眼底8
这里是输出：
我回答我自己的问题：
（1） 困难的方法：使用
（2） 简单方法：为每个列添加新的div，下面是HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mega Menu Layout Test</title>
<style>
h1
{
margin:0px;
font-size:16px;
}
.wrapper
{
position:absolute;
width:400px;
background:#CCC;
}
.category
{
float:left;
margin:10px;
width:180px;
}
.subcategory
{
}
</style>
</head>
<body>
<div class="wrapper" >
<div class="category">
<h1>Lorem Ipsum 1</h1>
</div>
<div class="category">
<h1>Lorem Ipsum 2</h1>
</div>
<div class="category">
<h1>Lorem Ipsum 3</h1>
<div>
<a href="#" style="display:block;">Dolor Sit Amet</a>
</div>
</div>
<div class="category">
<h1>Lorem Ipsum 4</h1>
<div>
<a href="#" style="display:block;">Dolor Sit Amet</a>
<a href="#" style="display:block;">Consectetuer</a>
<a href="#" style="display:block;">Adipiscing Elit</a>
</div>
</div>
<div class="category">
<h1>Lorem Ipsum 5</h1>
</div>
<div class="category">
<h1>Lorem Ipsum 6</h1>
<div>
<a href="#" style="display:block;">Dolor Sit Amet</a>
<a href="#" style="display:block;">Phasellus Congue</a>
<a href="#" style="display:block;">Fringilla Accumsan</a>
<a href="#" style="display:block;">Praesent aliquam</a>
<a href="#" style="display:block;">Suspendisse non purus</a>
</div>
</div>
<div class="category">
<h1>Lorem Ipsum 7</h1>
<div>
<a href="#" style="display:block;">Dolor Sit Amet</a>
<a href="#" style="display:block;">Consectetuer</a>
<a href="#" style="display:block;">Adipiscing Elit</a>
</div>
</div>
<div class="category">
<h1>Lorem Ipsum 8</h1>
<div>
<a href="#" style="display:block;">Dolor Sit Amet</a>
<a href="#" style="display:block;">Consectetuer</a>
<a href="#" style="display:block;">Adipiscing Elit</a>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mega Menu Layout</title>
<style>
h1
{
margin:0px;
font-size:16px;
}
.wrapper
{
position:absolute;
width:400px;
background:#CCC;
}
.category
{
float:left;
margin:10px;
width:90%;
}
.col
{
float:left;
width:45%
}
</style>
</head>
<body>
<div class="wrapper" >
<div class="col">
<div class="category">
<div>
<h1>Lorem Ipsum 1</h1>
</div>
</div>
<div class="category">
<div>
<h1>Lorem Ipsum 2</h1>
</div>
</div>
<div class="category">
<div>
<h1>Lorem Ipsum 3</h1>
<a href="#" style="display:block;">Dolor Sit Amet</a>
</div>
</div>
<div class="category">
<div>
<h1>Lorem Ipsum 4</h1>
<a href="#" style="display:block;">Dolor Sit Amet</a>
<a href="#" style="display:block;">Consectetuer</a>
<a href="#" style="display:block;">Adipiscing Elit</a>
</div>
</div>
</div>
<div class="col">
<div class="category">
<div>
<h1>Lorem Ipsum 5</h1>
</div>
</div>
<div class="category">
<div>
<h1>Lorem Ipsum 6</h1>
<a href="#" style="display:block;">Dolor Sit Amet</a>
<a href="#" style="display:block;">Phasellus Congue</a>
<a href="#" style="display:block;">Fringilla Accumsan</a>
<a href="#" style="display:block;">Praesent aliquam</a>
<a href="#" style="display:block;">Suspendisse non purus</a>
</div>
</div>
<div class="category">
<div>
<h1>Lorem Ipsum 7</h1>
<a href="#" style="display:block;">Dolor Sit Amet</a>
<a href="#" style="display:block;">Consectetuer</a>
<a href="#" style="display:block;">Adipiscing Elit</a>
</div>
</div>
<div class="category">
<div>
<h1>Lorem Ipsum 8</h1>
<a href="#" style="display:block;">Dolor Sit Amet</a>
<a href="#" style="display:block;">Consectetuer</a>
<a href="#" style="display:block;">Adipiscing Elit</a>
</div>
</div>
</div>
</div>
</body>
</html>
超大菜单布局
h1
{
边际：0px；
字体大小：16px；
}
.包装纸
{
位置：绝对位置；
宽度：400px；
背景：#CCC；
}
类别
{
浮动：左；
利润率：10px；
宽度：90%；
}
上校
{
浮动：左；
宽度：45%
}
同侧眼底1
同侧视野2
同侧视野3
同侧视野4
同侧视野5
同侧视野6
同侧视野7
同侧眼底8
这里是输出：
如果你不喜欢使用jQuery，请查看jQuery砌体——这对这类事情很有用：@Zulkhaery——如果你解决了它，你应该将你的代码作为解决方案发布，然后“接受”它作为答案，这样这个问题就不会“没有答案”。@Scott:8小时后我无法回答“声誉低于100的用户在提问后8小时内无法回答自己的问题。”没关系（我忘了）。只要试着记住，8小时后回来，在回答中发布更正后的代码并接受它，这样问题就可以得到正式回答。如果你不喜欢使用jQuery，请查看jQuery-Mashery——它非常适合这种类型：@Zulkhaery——如果你解决了它，你应该将代码作为解决方案发布，然后“接受”“这是一个答案，这样这个问题就不会“没有答案”。@Scott:8小时后我无法回答”声誉低于100的用户无法回答