在下面链接的代码中，有一个结果，其中的列位于右侧。如果屏幕较小，您可能需要放大结果窗口。
问题
我在列部分的两边都有边距。我想保留列之间的边距，而不是两侧。怎么办？
创建表格对我来说不是一个选项。接受使用 jQuery 的答案。
代码
如果上面的 jsfiddle 链接不起作用，这里是代码:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Smart Columns w/ CSS & jQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-size: 10px;
font-family: Arial, Verdana, Helvetica, sans-serif;
line-height: 1.8em;
background: #695e53;
}
img {border: none;}
a {color: #423b35;}
* {margin: 0; padding: 0;}
h1,h2{ font-weight: normal; margin: 10px 0; padding: 10px 0;}
h1 {
font-size: 4em;
padding: 15px 5%;
margin: 0 auto;
background: #2b221b;
line-height: 1em;
color: #e3e1d5;
border-bottom: 1px solid #1b140e;
}
.mycontent {
width: 500px;
background: #fff;
float: left;
}
.mycontent p, h2, ul, small {
padding: 0 20px;
}
.container {
width: 700px;
float: left;
}
.gallery{
width: 100%;
/*margin: 10px 0 50px;*/
list-style: none;
}
.gallery .column {
float: left;
width: 200px;
padding: 0;
margin: 5px 0;
display: inline;
}
.article {
/*height: 355px;*/
font-size: 1em;
margin-right: 5px;
margin-left: 5px;
/*padding: 10px 10px 0 10px;*/
padding-bottom: 5px;
background: #e3e1d5;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.article h2 {
font-size: 12px;
font-weight: bold;
}
.article > a {
display: block;
/*border: 10px solid #fff;*/
background: #fff;
padding: 10px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.article img {
width: 100%;
margin: 0 auto;
background:#fff;
display: block;
}
.sidebar {
background: #ccc;
float: left;
width: 200px;
height: 700px;
margin-right: 20px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(window).load(function(){
var container = '.gallery';
function smartColumns() {
var body_width = $('body').width();
var mycontent_width = $('.mycontent').width();
var container_width = (body_width-mycontent_width);
$('.container').css({ 'width' : container_width});
$(container).css({ 'width' : "100%"});
var colWrap = $(container).outerWidth();
var colNum = Math.floor(colWrap / 120);
var colFixed = Math.floor(colWrap / colNum);
$(container).css({ 'width' : colWrap});
$(container + " .column").css({ 'width' : colFixed});
}
function equalHeight(group)
{
var tallest = 0;
group.height('auto');
group.each(function() {
var thisHeight = $(this).outerHeight();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
smartColumns();
equalHeight($(".gallery .column .article"));
$(window).resize(function () {
smartColumns();
equalHeight($(".gallery .column .article"));
});
});
});
</script>
</head>
<body>
<h1>TV-licensen blir straff-”skatt” för datoranvändare</h1>
<div class="mycontent">
<div class="sidebar">
<h4>Pages</h4>
<ul>
<li>TEst</li>
<li>TEst</li>
<li>TEst</li>
</ul>
<h4>Pages</h4>
<ul>
<li>TEst</li>
<li>TEst</li>
<li>TEst</li>
</ul>
</div>
<small class="date">2011-02-22 @ 19:18</small>
<p>På IDG finns ett flertal artiklar som berör SVT:s uttalande angående ändrade regler för TV-licensen. Nu ska plötsligt samtliga hushåll betala TV-licens oavsett om man ser på TV, använder SVT Play eller ej.</p>
<h2>Några citat som sagts av SVT:</h2>
<p>”<em><strong>- Tanken är att alla hushåll ska betala, oavsett teknik.</strong></em>”</p>
<p>”<strong><em>- Public service är innehåll, inte ett mottagningssätt. Därför bör en allmän, teknikoberoende, avgift tas ut av hushållen – oavsett hur man väljer att ta emot innehållet. Det skulle också innebära att tv-avgiftskontrollerna skulle kunna upphöra.</em></strong>”</p>
<p>”<strong><em>- För att hålla rågången fri är det viktigt att public service-bolagen – inte Skatteverket – fortsatt har ansvaret att samla in avgiften.</em></strong>”</p>
<h2>Tankar kring förslaget</h2>
<ul>
<li>Det blir likt en straff-”skatt” för datoranvändare och alla andra människor. SVT vill få det att låta vettigt genom att bibehålla det som ”Public service”. När vi ändå har slagit oss in på den här banan kan vi lika gärna skicka pengarna till skatteverket direkt, utan mellanhänder.</li>
<li>Plötsligt ska vi betala för SVT Play oavsett om vi använder tjänsten eller ej. Låt TV-bolagen konkurrera istället. Det fungerar ju rent ekonomiskt för dem.</li>
<li>Varför kan inte SVTplay lösenords-skydda sin webbplats och låta de som betalar ta del av det? Antagligen för att de är oroliga över att inte få några användare.</li>
<li>Varför inte slopa TV-licensen helt och hållet? Vi har idag en mängd kanaler, vissa med reklam och vissa utan. Låt pengarna gå till något vettigare, som vård och omsorg.</li>
</ul>
<p><strong>Källor:</strong></p>
<ul>
<li><a href="http://www.idg.se/2.1085/1.370046/svt-alla-ska-betala---oavsett-teknik">IDG – Alla ska betala oavsett teknik</a></li>
<li><a href="http://www.idg.se/2.1085/1.370096/svt-forslag-kan-ge-battre-webb-tv">IDG – SVT-förslag kan ge bättre webb-tv</a></li>
<li><a href="http://www.idg.se/2.1085/1.369949/svt-vill-infora-tv-avgift-for-internetanvandare">IDG – SVT vill införa tv-avgift för internetanvändare</a></li>
</ul>
Matt Cutts (Google) på WorldCamp TV
Jag hittade ett intressant klipp där Matt Cutts (från Google) pratar på WorldCamp. Han säger att han älskar WordPress. Matt Cutts går igenom sökmotoroptimering i Google, och hur man skapar sökmotorvänliga bloggar i WordPress. I klippet fann jag en del saker som jag inte kände till om sökmotoroptimering, saker som jag tidigare bara anat men inte haft tid att testa.
Jag rekommenderar klippet starkt till de som är intresserade av sökmotoroptimering i WordPress, men också sökmotoroptimering mer generellt.
Matt Cutts (Google) på WorldCamp TV
Jag hittade ett intressant klipp där Matt Cutts (från Google) pratar på WorldCamp. Han säger att han älskar WordPress. Matt Cutts går igenom sökmotoroptimering i Google, och hur man skapar sökmotorvänliga bloggar i WordPress. I klippet fann jag en del saker som jag inte kände till om sökmotoroptimering, saker som jag tidigare bara anat men inte haft tid att testa.
Jag rekommenderar klippet starkt till de som är intresserade av sökmotoroptimering i WordPress, men också sökmotoroptimering mer generellt.
</div>
<div class="container">
<div class="gallery">
<!--<div class="column">
<div class="article">
<a href="http://www.designbombs.com/technology/too-much-tweet/"><img src="http://t3.gstatic.com/images?q=tbn:ANd9GcSixLzTQnzMXa3uHZWaaVa1ghYVhcxhIBb2c0ujqQ-5-ynoFg9gNg"alt="" /></a>
<h2><a href="http://www.designbombs.com/technology/too-much-tweet/">Too Much Tweet</a></h2>
</div>
</div> -->
<div class="column">
<div class="article">
<a href="http://www.designbombs.com/illustrations/berit-somme/"><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcT7T5GT5CPInklcJ57vkFcK2Zjcc54p-84yfBtBlotyEqNy8ANl"alt="" /></a>
<h2><a href="http://www.designbombs.com/illustrations/berit-somme/">Berit Somme</a></h2>
</div>
</div>
<div class="column">
<div class="article">
<a href="http://www.designbombs.com/light/jason-reynolds/"><img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/jasonreynolds_thumb.gif"alt="" /></a>
<h2><a href="http://www.designbombs.com/light/jason-reynolds/">Jason Reynolds</a></h2>
</div>
</div>
<div class="column">
<div class="article">
<a href="http://www.designbombs.com/illustrations/vanity-claire/"><img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/vanityclaire_thumb.gif"alt="" /></a>
<h2><a href="http://www.designbombs.com/illustrations/vanity-claire/">Vanity Claire</a></h2>
</div>
</div>
<div class="column">
<div class="article">
<a href="http://www.designbombs.com/design-firm/we-are-sofa/"><img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/wearesofa_thumb.gif"alt="" /></a>
<h2><a href="http://www.designbombs.com/design-firm/we-are-sofa/">We Are Sofa</a></h2>
</div>
</div>
<div class="column">
<div class="article">
<a href="http://www.designbombs.com/design-firm/outline-2-design/"><img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/outline2design_thumb.gif"alt="" /></a>
<h2><a href="http://www.designbombs.com/design-firm/outline-2-design/">Outline 2 Design</a></h2>
</div>
</div>
<div class="column">
<div class="article">
<a href="http://www.designbombs.com/blog/rocket-club/"><img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/rocketclub_thumb.gif"alt="" /></a>
<h2><a href="http://www.designbombs.com/blog/rocket-club/">Rocket Club</a></h2>
</div>
</div>
<div class="column">
<div class="article">
<a href="http://www.designbombs.com/portfolio/emotions/"><img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/emotions_thumb.gif"alt="" /></a>
<h2><a href="http://www.designbombs.com/portfolio/emotions/">Emotions</a></h2>
</div>
</div>
<div class="column">
<div class="article">
<a href="http://www.designbombs.com/ecommerce/sansa/"><img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/sansa_thumb.gif"alt="" /></a>
<h2><a href="http://www.designbombs.com/ecommerce/sansa/">Sansa</a></h2>
</div>
</div>
<div class="column">
<div class="article">
<a href="http://www.designbombs.com/design-firm/legwork-studio/"><img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/legworkstudio_thumb.gif"alt="" /></a>
<h2><a href="http://www.designbombs.com/design-firm/legwork-studio/">Legwork Studio</a></h2>
</div>
</div>
<div class="column">
<div class="article">
<a href="http://www.designbombs.com/community/moytoy/"><img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/moytoy_thumb.gif"alt="" /></a>
<h2><a href="http://www.designbombs.com/community/moytoy/">Moytoy</a></h2>
</div>
</div>
<div class="column">
<div class="article">
<a href="http://www.designbombs.com/design-firm/method-arts/"><img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/methodarts_thumb.gif"alt="" /></a>
<h2><a href="http://www.designbombs.com/design-firm/method-arts/">Method Arts</a></h2>
</div>
</div>
<div class="column">
<div class="article">
<a href="http://www.designbombs.com/ecommerce/479-popcorn/"><img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/479popcorn_thumb.gif"alt="" /></a>
<h2><a href="http://www.designbombs.com/ecommerce/479-popcorn/">479 Popcorn</a></h2>
</div>
</div>
<div class="column">
<div class="article">
<a href="http://www.designbombs.com/design-firm/mode-project/"><img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/modeproject_thumb.gif"alt="" /></a>
<h2><a href="http://www.designbombs.com/design-firm/mode-project/">Mode Project</a></h2>
</div>
</div>
</ul>
</div>
</body>
</html>
最佳答案
http://jsfiddle.net/5dw8M/54/
这很丑陋，但似乎正是您所需要的。结果是通过使用 position: relative 和 margin 进行操作来实现的。
解释:
.mycontent {
width: 510px; /* Made it bigger. appear more space on left side of this colum */
margin-left: -5px;
background: #fff;
float: left;
position: relative;
left: 10px; /* overlay on existing margin from gallery */
}
.gallery{
width: 100%;
/*margin: 10px 0 50px;*/
list-style: none;
position: relative;
right: -5px; /* overlay on existing margin so it's not visible */
}
.gallery .column {
float: left;
width: 200px;
padding: 0;
margin: 2.5px 0; /* just changed it. Mark for you to know */
display: inline;
}
.article {
/*height: 355px;*/
font-size: 1em;
margin-right: 0px;
margin-left: 5px;
/*padding: 10px 10px 0 10px;*/
padding-bottom: 5px;
background: #e3e1d5;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.sidebar {
background: #ccc;
float: left;
width: 205px;
height: 700px;
margin-right: 20px;
margin-left: -5px;
}
关于jquery - 使用 CSS 或 jQuery 去除列的侧边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5330966/