javascript - 使用CSS安排具有动态内容的多个div

Question

我想知道如何安排具有动态内容的div

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/

Answer 1

我想，我让你按照你的要求试试这个我已经这样做了..

.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>