HTML代码结构
<div id="megamenu1" class="megamenu">
<div class="column">
<h3>News Related</h3>
<ul>
<li><a href=link>CNN</a></li>
<li><a href=link>CNN</a></li>
<li><a href=link>CNN</a></li>
<li><a href=link>CNN</a></li>
<li><a href=link>CNN</a></li>
<li><a href=link>CNN</a></li>
</ul>
</div>
<div class="column">
<h3>Technology</h3>
<ul>
<li><a href=link>lllNN</a></li>
<li><a href=link>CNxcN</a></li>
<li><a href=link>CNxzczN</a></li>
</ul>
</div>
</div>
CSS
.megamenu{
position: absolute;
display: none;
left: 0;
top: 0;
background: white;
border: 1px solid #f06b24;
border-width: 5px 1px;
padding: 10px;
font: normal 12px Verdana;
z-index: 100;
}
.megamenu .column{
width: 200px;
min-height: 250px;
border: 1px solid #000;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
margin: 5px;
zoom: 1;
*display: inline;
_height: 250px;
}
.megamenu .column ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.megamenu .column ul li{
padding-bottom: 5px;
}
.megamenu .column h3{
background: #e0e0e0;
font: bold 13px Arial;
margin: 0 0 5px 0;
}
.megamenu .column ul li a{
text-decoration: none;
}
.megamenu .column ul li a:hover{
color: red;
}
如何排列div使得div之间没有空格
div的数量可以增加或减少
div中的内容可增可减
是否可以仅通过使用 css 来实现,而不使用 http://masonry.desandro.com/
最佳答案
我想,我让你按照你的要求试试这个我已经这样做了..
.megamenu{
position: absolute;
left: 0;
top: 0;
background: white;
border: 1px solid #f06b24;
border-width: 5px 1px;
padding: 10px;
font: normal 12px Verdana;
z-index: 100;
}
.megamenu .column{
width: 200px;
min-height: 250px;
border: 1px solid #000;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
margin: 5px;
zoom: 1;
float: left;
}
.megamenu .column ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.megamenu .column ul li{
padding-bottom: 5px;
}
.megamenu .column h3{
background: #e0e0e0;
font: bold 13px Arial;
margin: 0 0 5px 0;
}
.megamenu .column ul li a{
text-decoration: none;
}
.megamenu .column ul li a:hover{
color: red;
}
<div id="megamenu1" class="megamenu">
<div class="column">
<h3>News Related</h3>
<ul>
<li><a href=link>CNN</a></li>
<li><a href=link>CNN</a></li>
<li><a href=link>CNN</a></li>
<li><a href=link>CNN</a></li>
<li><a href=link>CNN</a></li>
<li><a href=link>CNN</a></li>
<li><a href=link>CNN</a></li>
<li><a href=link>CNN</a>
</li><li><a href=link>CNN</a></li><li><a href=link>CNN</a></li><li><a href=link>CNN</a></li><li><a href=link>CNN</a></li>
<li><a href=link>CNN</a></li>
<li><a href=link>CNN</a></li>
<li><a href=link>CNN</a></li>
<li><a href=link>CNN</a></li>
<li><a href=link>CNN</a></li>
<li><a href=link>CNN</a></li><li><a href=link>CNN</a></li>
<li><a href=link>CNN</a></li>
<li><a href=link>CNN</a></li>
<li><a href=link>CNN</a></li>
<li><a href=link>CNN</a></li>
<li><a href=link>CNN</a></li>
<li><a href=link>CNN</a></li>
<li><a href=link>CNN</a></li>
<li><a href=link>CNN</a></li>
<li><a href=link>CNN</a></li>
<li><a href=link>CNN</a></li>
<li><a href=link>CNN</a></li>
</ul>
</div>
<div class="column">
<h3>Technology</h3>
<ul>
<li><a href=link>lllNN</a></li>
<li><a href=link>CNxcN</a></li>
<li><a href=link>CNxzczN</a></li>
</ul>
</div>
<div class="column">
<h3>Technology2</h3>
<ul>
<li><a href=link>lllNN</a></li>
<li><a href=link>CNxcN</a></li>
<li><a href=link>CNxzczN</a></li>
</ul>
</div>
<div class="column">
<h3>Technology3</h3>
<ul>
<li><a href=link>lllNN</a></li>
<li><a href=link>CNxcN</a></li>
<li><a href=link>CNxzczN</a></li>
</ul>
</div>
<div class="column">
<h3>Technology4</h3>
<ul>
<li><a href=link>lllNN</a></li>
<li><a href=link>CNxcN</a></li>
<li><a href=link>CNxzczN</a></li>
</ul>
</div>
<div class="column">
<h3>Technology5</h3>
<ul>
<li><a href=link>lllNN</a></li>
<li><a href=link>CNxcN</a></li>
<li><a href=link>CNxzczN</a></li>
</ul>
</div>
<div class="column">
<h3>Technology6</h3>
<ul>
<li><a href=link>lllNN</a></li>
<li><a href=link>CNxcN</a></li>
<li><a href=link>CNxzczN</a></li>
</ul>
</div>
</div>
关于javascript - 使用CSS安排具有动态内容的多个div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31865242/