根据内容调整div高度
我正在致力于构建大型菜单。我在安排 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>
生成输出，如下所示：
此菜单是动态创建的，因此很难设置每个div固定高度
更好的方法如何删除Lorem Ipsum 3和Lorem Ipsum 5之间的空白； Lorem Ipsum 5 和 Lorem Ipsum 7 ？
I'm working on building mega menu. I have trouble when arrange div.
Here's the 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>
Produces output like this:
This menu create dynamically so im difficult to set fixed height each div
Is better way How to remove empty space between Lorem Ipsum 3 and Lorem Ipsum 5; Lorem Ipsum 5 and Lorem Ipsum 7 ?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我回答我自己的问题：
（1）困难的方法：使用 jQuery Masonry
（2）简单的方法：添加每个列的新 div，这里是 HTML：
这里是输出：
I answer my own question:
(1) Hard way: use a jQuery Masonry
(2) Simple way: Add new div for each colum, here the HTML:
and here the output:
我会删除空格，是的。另一方面，您需要为您拥有的每一“行”进行一些包装 div。
I would remove the spaces, yes. The other way, you'll need some wrapping div's for each 'row' you have.