我正在尝试填充页面上DIV之间的空白区域。
由于某种原因，它没有正确填补所有空白！基本上，我需要自动移动Divs，以便它们之间永远不会有间隙。每个列表都在<div class="col_1"></div>内，这是需要移动以填补空白的Div。
我不想使用像砌体js或任何其他臃肿的东西来实现这一点。任何帮助将不胜感激。
/* NAVIGATION */
#Navigation {
width: 100%;
float: right;
margin: 14px 70px 0 0;
z-index: 100;
position: static;
}
/*----------------------------------------
--------- NEW NAVIGATION CLASSES ---------
--------------------------------------- */
#menu {
list-style: none;
width: 100%;
font-size: 14px;
font-family: 'Lucida Grande', Helvetica, sans-serif;
text-align: left;
z-index: 999;
position: static;
}
p.menu {
font-family: 'Lucida Grande', Helvetica, sans-serif;
font-size: 14px;
color: #0e4fa3;
padding: 6px 0 11px 0;
text-align: right;
margin-left: 20px;
}
#menu li {
float: left;
display: block;
text-align: center;
position: static;
padding: 7px 10px 7px 10px;
margin-right: 5px;
border: 0;
z-index: 2;
}
#menu li:hover {
padding: 7px 10px 7px 10px;
background: #0e4fa3;
}
#menu li:hover a {
color: #FFFFFF;
}
#menu li.popular:hover a {
color: #FFF;
}
#menu li a {
font-family: 'Lucida Grande', Helvetica, Arial, sans-serif;
font-size: 14px;
color: #5a748f;
display: block;
outline: 0;
text-decoration: none;
}
#menu li .drop {
padding-right: 21px;
background: url("/uk/wp-content/uploads/2012/07/drop.png") no-repeat right 8px;
/*-- http://www.printing.com/uk/blog/wp-content/uploads/2012/07/drop.png --*/
}
#menu li:hover .drop {
background: url("/uk/wp-content/uploads/2012/07/drop-white.png") no-repeat right 8px;
/*-- http://www.printing.com/uk/blog/wp-content/uploads/2012/07/drop-white.png --*/
}
#pricesMenu {
margin-top: 7px;
float: left;
position: absolute;
left: 0;
/* Hides the drop down */
text-align: left;
padding: 6px 3px 4px 3px;
border-bottom: 5px solid #0e4fa3;
background: #ffffff;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
/* Rounded Corners */
-moz-border-radius: 0px 0px 3px 3px;
-webkit-border-radius: 0px 0px 3px 3px;
border-radius: 0px 0px 3px 3px;
z-index: 999;
width: 100%;
}
ul#col_blue {
width: 180px;
display: inline;
padding: 0;
float: left;
position: relative;
margin: 0;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
background: #019ae2;
/* Old browsers */
background: -moz-linear-gradient(top, #019ae2 0%, #0e4fa3 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #019ae2), color-stop(100%, #0e4fa3));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #019ae2 0%, #0e4fa3 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #019ae2 0%, #0e4fa3 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #019ae2 0%, #0e4fa3 100%);
/* IE10+ */
background: linear-gradient(to bottom, #019ae2 0%, #0e4fa3 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#019ae2', endColorstr='#0e4fa3', GradientType=0);
/* IE6-9 */
}
ul#col_blue_wide {
width: 237px;
display: inline;
padding: 0;
float: left;
position: relative;
margin: 0;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
background: #019ae2;
/* Old browsers */
background: -moz-linear-gradient(top, #019ae2 0%, #0e4fa3 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #019ae2), color-stop(100%, #0e4fa3));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #019ae2 0%, #0e4fa3 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #019ae2 0%, #0e4fa3 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #019ae2 0%, #0e4fa3 100%);
/* IE10+ */
background: linear-gradient(to bottom, #019ae2 0%, #0e4fa3 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#019ae2', endColorstr='#0e4fa3', GradientType=0);
/* IE6-9 */
}
.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
display: inline;
float: left;
position: relative;
margin-right: 5px;
padding: 0 5px;
}
.col_1 {
width: 185px;
}
.col_2 {
width: 237px;
}
#menu ul li {
font-family: 'Lucida Grande', Helvetica, sans-serif;
line-height: 18px;
font-size: 12px;
text-align: left;
z-index: 999;
}
#menu h2 {
font-family: 'Lucida Grande', Helvetica, sans-serif;
font-size: 16px;
margin: 7px 0 4px 0;
padding-bottom: 5px;
font-weight: lighter;
color: #272727;
}
#menu li ul h3 {
font-family: 'Lucida Grande', Helvetica, sans-serif;
font-size: 14px;
margin: 2px 5px;
padding: 0;
color: #FFF;
border-bottom: 1px solid #FFF;
}
#menu li ul h4 {
color: #019ae2;
font-size: 15px;
border-bottom: 1px solid #ced2d5;
margin: 0;
padding: 0;
font-weight: normal;
}
#menu li:hover div a {
font-size: 12px;
color: #0e4fa3;
}
#menu li:hover div a:hover {
color: #019ae2;
text-decoration: underline;
}
#menu li ul {
list-style: none;
padding: 0;
margin: 0 10px;
margin-bottom: 10px;
}
#menu li ul li {
font-size: 10px;
line-height: 1.3em;
position: relative;
padding: 0;
margin: 0 10px 0 10px;
float: none;
text-align: left;
width: 180px;
padding: 3px 0 0 0;
}
#menu li ul li:hover {
background: none;
border: none;
padding: 3px 0 0 0;
margin: 0 0 0 10px;
}
/* -- FOR CLASSES IN LEFT BLUE LIST --*/
#menu li ul li.popular {
line-height: 1.5em;
}
#menu li ul li.popular a {
font-size: 12px;
position: relative;
padding: 0;
margin: 0 5px;
float: none;
text-align: left;
width: 180px;
color: #fff;
}
#menu li ul li.popular a:hover {
color: #FFF;
text-decoration: underline;
background: none;
border: none;
padding: 0;
margin: 0 5px;
}
#menu li ul li.popularbase a {
font-size: 12px;
position: relative;
padding-bottom: 10px;
margin: 0 5px;
float: none;
text-align: left;
width: 180px;
color: #fff;
}
#header div.tel {
position: relative;
left: 820px;
top: 41px;
height: 50px;
width: 220px;
text-align: left;
}
#header p.tel {
position: absolute;
font-size: 14px;
color: #4b4b4b;
vertical-align: top;
}
ul#thumbList {
width: 560px;
display: inline;
padding: 0;
float: left;
position: relative;
margin: 0;
}
#menu li ul li.imageThumb {
width: 100px;
height: 140px;
float: left;
diplay: block;
margin: 0;
padding: 0 10px 5px 0;
text-align: center;
font-size: 12px;
line-height: 1.8em;
}
#menu li ul li.imageThumb img {
border: 1px solid #c0c0c0;
background: #eee;
}
#menu li ul li.imageThumb a {
width: 100px;
float: left;
margin: 0;
padding: 0;
color: #0e4fa3;
text-decoration: none;
}
#menu li ul li.imageThumb a span {
clear: both;
diplay: block;
float: left;
width: 100px;
text-align: center;
}
#menu li ul li.imageThumb a:hover {
width: 100px;
height: 140px;
float: left;
margin: 0;
padding: 0;
text-decoration: underline;
}<div id="header">
<div id="HeadWrapper">
<div id="Navigation">
<ul id="menu">
<li id="designMenuItem">
<a href="javascript:void(0);" class="drop"></a>
<!-- </li><!-- End 2 columns Item -->
<li id="pricesMenuItem"><a href="#" class="drop">Products & Prices</a>
<!-- Begin 4 columns Item -->
<div style="" id="pricesMenu">
<!-- Begin 4 columns container -->
<div class="col_1">
<ul>
<h4>B</h4>
<li><a href="/uk/bags" alt="Bags" title="Bags">Bags</a>
</li>
<li><a href="/uk/banner-stands-roller" alt="Banner Stands - Roller" title="Banner Stands - Roller">Banner Stands - Roller</a>
</li>
</ul>
</div>
<div class="col_1">
<ul>
<h4>B</h4>
<li><a href="/uk/bags" alt="Bags" title="Bags">Bags</a>
</li>
<li><a href="/uk/banner-stands-roller" alt="Banner Stands - Roller" title="Banner Stands - Roller">Banner Stands - Roller</a>
</li>
</ul>
</div>
<div class="col_1">
<ul>
<h4>B</h4>
<li><a href="/uk/bags" alt="Bags" title="Bags">Bags</a>
</li>
<li><a href="/uk/banner-stands-roller" alt="Banner Stands - Roller" title="Banner Stands - Roller">Banner Stands - Roller</a>
</li>
<li><a href="/uk/bags" alt="Bags" title="Bags">Bags</a>
</li>
<li><a href="/uk/banner-stands-roller" alt="Banner Stands - Roller" title="Banner Stands - Roller">Banner Stands - Roller</a>
</li>
</ul>
</div>
<div class="col_1">
<ul>
<h4>B</h4>
<li><a href="/uk/bags" alt="Bags" title="Bags">Bags</a>
</li>
<li><a href="/uk/banner-stands-roller" alt="Banner Stands - Roller" title="Banner Stands - Roller">Banner Stands - Roller</a>
</li>
</ul>
</div>
<div class="col_1">
<ul>
<h4>B</h4>
<li><a href="/uk/bags" alt="Bags" title="Bags">Bags</a>
</li>
<li><a href="/uk/banner-stands-roller" alt="Banner Stands - Roller" title="Banner Stands - Roller">Banner Stands - Roller</a>
</li>
<li><a href="/uk/bags" alt="Bags" title="Bags">Bags</a>
</li>
<li><a href="/uk/banner-stands-roller" alt="Banner Stands - Roller" title="Banner Stands - Roller">Banner Stands - Roller</a>
</li>
<li><a href="/uk/bags" alt="Bags" title="Bags">Bags</a>
</li>
<li><a href="/uk/banner-stands-roller" alt="Banner Stands - Roller" title="Banner Stands - Roller">Banner Stands - Roller</a>
</li>
</ul>
</div>
<div class="col_1">
<ul>
<h4>B</h4>
<li><a href="/uk/bags" alt="Bags" title="Bags">Bags</a>
</li>
<li><a href="/uk/banner-stands-roller" alt="Banner Stands - Roller" title="Banner Stands - Roller">Banner Stands - Roller</a>
</li>
<li><a href="/uk/bags" alt="Bags" title="Bags">Bags</a>
</li>
<li><a href="/uk/banner-stands-roller" alt="Banner Stands - Roller" title="Banner Stands - Roller">Banner Stands - Roller</a>
</li>
<li><a href="/uk/bags" alt="Bags" title="Bags">Bags</a>
</li>
<li><a href="/uk/banner-stands-roller" alt="Banner Stands - Roller" title="Banner Stands - Roller">Banner Stands - Roller</a>
</li>
<li><a href="/uk/bags" alt="Bags" title="Bags">Bags</a>
</li>
<li><a href="/uk/banner-stands-roller" alt="Banner Stands - Roller" title="Banner Stands - Roller">Banner Stands - Roller</a>
</li>
<li><a href="/uk/bags" alt="Bags" title="Bags">Bags</a>
</li>
<li><a href="/uk/banner-stands-roller" alt="Banner Stands - Roller" title="Banner Stands - Roller">Banner Stands - Roller</a>
</li>
</ul>
</div>
<div class="col_1">
<ul>
<h4>B</h4>
<li><a href="/uk/bags" alt="Bags" title="Bags">Bags</a>
</li>
<li><a href="/uk/banner-stands-roller" alt="Banner Stands - Roller" title="Banner Stands - Roller">Banner Stands - Roller</a>
</li>
</ul>
</div>
<div class="col_1">
<ul>
<h4>B</h4>
<li><a href="/uk/bags" alt="Bags" title="Bags">Bags</a>
</li>
<li><a href="/uk/banner-stands-roller" alt="Banner Stands - Roller" title="Banner Stands - Roller">Banner Stands - Roller</a>
</li>
</ul>
</div>
<!--<div class="col_1">
<ul>
<h4>E</h4>
<li><a href="/uk/embroidered-clothing" alt="Embroidered Clothing" title="Embroidered Clothing">Embroidered Clothing</a></li>
<li><a href="/uk/envelopes-blank" alt="Envelopes - Blank" title="Envelopes - Blank">Envelopes - Blank</a></li>
<li><a href="/uk/envelopes-printed" alt="Envelopes - Printed" title="Envelopes - Printed">Envelopes - Printed</a></li>
<li><a href="/uk/exhibition-display-stands" alt="Exhibition & Display Stands" title="Exhibition & Display Stands">Exhibition & Display Stands</a></li>
</ul>
<ul>
<h4>F</h4>
<li><a href="/uk/flags" alt="Flags" title="Flags">Flags</a></li>
<li><a href="/uk/flyers" alt="Flyers" title="Flyers">Flyers</a></li>
<li><a href="/uk/showcards" alt="Thick Flyers" title="Thick Flyers">Thick Flyers</a></li>
<li><a href="/uk/flyers-folded" alt="Folded Flyers" title="Folded Flyers">Folded Flyers</a></li>
<li><a href="/uk/folders" alt="Folders" title="Folders">Folders</a></li>
<li><a href="/uk/frames" alt="Frames for Posters" title="Frames for Posters">Frames for Posters</a></li>
<li><a href="/uk/frisbees-yoyos-games" alt="Frisbees, Yoyos & Games" title="Frisbees, Yoyos & Games">Frisbees, Yoyos & Games</a></li>
</ul>
<ul>
<h4>G</h4>
<li><a href="/uk/glass-desktop-gifts" alt="Glass Desktop Gifts" title="Glass Desktop Gifts">Glass Desktop Gifts</a></li>
<li><a href="/uk/greeting-cards" alt="Greeting Cards" title="Greeting Cards">Greeting Cards</a></li>
</ul>
<ul>
<h4>H</h4>
<li><a href="/uk/hospitality-solutions" alt="Hospitality Solutions" title="Hospitality Solutions">Hospitality Solutions</a></li>
</ul>
<ul>
<h4>I</h4>
<li><a href="/uk/inserts-for-folders" alt="Inserts for Folders" title="Inserts for Folders">Inserts for Folders</a></li>
<li><a href="/uk/invitations" alt="Invitations" title="Invitations">Invitations</a></li>
</ul>
</div>
<div class="col_1">
<ul>
<h4>K</h4>
<li><a href="/uk/keyrings-bottleopeners-icescrapers" alt="Keyrings & Bottle Openers" title="Keyrings & Bottle Openers">Keyrings & Bottle Openers</a></li>
</ul>
<ul>
<h4>L</h4>
<li><a href="/uk/laser-price-lists" alt="Laser Price Lists" title="Laser Price Lists">Laser Price Lists</a></li>
<li><a href="/uk/leaflets" alt="Leaflets" title="Leaflets">Leaflets</a></li>
<li><a href="/uk/leaflets-folded" alt="Folded Leaflets" title="Folded Leaflets">Folded Leaflets</a></li>
<li><a href="/uk/leaflets-perforated" alt="Perforated Leaflets" title="Perforated Leaflets">Perforated Leaflets</a></li>
<li><a href="/uk/stationery" alt="Letterheads" title="Letterheads">Letterheads</a></li>
</ul>
<ul>
<h4>M</h4>
<li><a href="/uk/menus-and-tentcards" alt="Menus & Tent Cards" title="Menus & Tent Cards">Menus & Tent Cards</a></li>
<li><a href="/uk/mousemats-coasters-desktidies" alt="Mouse Mats & Coasters" title="Mouse Mats & Coasters">Mouse Mats & Coasters</a></li>
</ul>
<ul>
<h4>N</h4>
<li><a href="/uk/nano-cards" alt="Nano Cards" title="Nano Cards">Nano Cards</a></li>
<li><a href="/uk/notepads" alt="Notepads" title="Notepads">Notepads</a></li>
<li><a href="/uk/ncrs" alt="NCRs" title="NCRs">NCRs</a></li>
</ul>
<ul>
<h4>P</h4>
<li><a href="/uk/pens" alt="Pens" title="Pens">Pens</a></li>
<li><a href="/uk/postcards" alt="Postcards" title="Postcards">Postcards</a></li>
<li><a href="/uk/posters" alt="Posters - Large Format(1+)" title="Posters - Large Format(1+)">Posters - Large Format (1+)*</a></li>
<li><a href="/uk/litho-posters" alt="Posters Litho (50+)" title="Posters Litho (50+)">Posters - Litho (50+)*</a></li>
</ul>
</div>-->
<!--<div class="col_1">
<ul>
<h4>R</h4>
<li><a href="/uk/reflective-items" alt="Reflective Items" title="Reflective Items">Reflective Items</a></li>
<li><a href="/uk/reportcovers-and-documentcorners" alt="Report Covers & Doc Corners" title="Report Covers & Doc Corners">Report Covers & Doc Corners</a></li>
<li><a href="/uk/rulers-paperclips" alt="Rulers & Paper Clips" title="Rulers & Paper Clips">Rulers & Paper Clips</a></li>
</ul>
<ul>
<h4>S</h4>
<li><a href="/uk/scratch-cards" alt="Scratch Cards" title="Scratch Cards">Scratch Cards</a></li>
<li><a href="/uk/signs-lightboxes" alt="Signs & Lightboxes" title="Signs & Lightboxes">Signs & Lightboxes</a></li>
<li><a href="/uk/showcards" alt="Showcards" title="Showcards">Showcards</a></li>
<li><a href="/uk/stationery" alt="Stationery" title="Stationery">Stationery</a></li>
<li><a href="/uk/stickers" alt="Stickers" title="Stickers">Stickers</a></li>
<li><a href="/uk/stickynotes-and-memopads" alt="Sticky Notes & Memo Pads" title="Sticky Notes & Memo Pads">Sticky Notes & Memo Pads</a></li>
<li><a href="/uk/swing-tickets-tags" alt="Swing Tickets & Tags" title="Swing Tickets & Tags">Swing Tickets & Tags</a></li>
</ul>
<ul>
<h4>T</h4>
<li><a href="/uk/tankards-and-tumblers" alt="Tankards & Tumblers" title="Tankards & Tumblers">Tankards & Tumblers</a></li>
<li><a href="/uk/trophies-and-awards" alt="Trophies & Awards" title="Trophies & Awards">Trophies & Awards</a></li>
</ul>
<ul>
<h4>V</h4>
<li><a href="/uk/vouchers" alt="Vouchers" title="Vouchers">Voucher Cards</a></li>
<li><a href="/uk/voucher-booklets" alt="Voucher Booklets" title="Voucher Booklets">Voucher Booklets</a></li>
<li><a href="/uk/laser-voucher-sheets" alt="Laser Voucher Sheets" title="Laser Voucher Sheets">Laser Voucher Sheets</a></li>
</ul>
<ul>
<h4>W</h4>
<li><a href="/uk/personalised-wine-and-champagne" alt="Wine, Champagne & Water" title="Wine, Champagne & Water">Wine, Champagne & Water</a></li>
<li><a href="/uk/wine-glasses-flutes" alt="Wine Glasses & Flutes" title="Wine Glasses & Flutes">Wine Glasses & Flutes</a></li>
<li><a href="/uk/wobblers" alt="Wobblers" title="Wobblers">Wobblers</a></li>
</ul>
</div>--></div>
<!-- End 4 columns container -->
</li>
<!-- End 4 columns Item -->
</ul>
</div>
<!-- Navigation end -->
</div>
<!-- Header end -->
答案 0 :(得分：0)
如果你想要摆脱它在创建类等时提供的自动空间。 您可以尝试通过在reset.css put
中应用reset.css来清除该浏览器的默认CSS样式 html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
也可以在http://meyerweb.com/eric/tools/css/reset/找到，并使用
将其链接到您的html<link href="reset.css" rel="stylesheet">
在此之后，您将不再获得自动间隙并可以自行设置，希望这会有所帮助。