使用CSS或jQuery在列上摆脱边缘边缘

在下面的链接中的代码中有一个右边的列。如果屏幕很小，则可能需要放大结果窗口。使用CSS或jQuery在列上摆脱边缘边缘

问题

我对柱部分的两侧边缘。我想保留列之间的边距，而不是侧边。怎么样？

创建表格不适合我。接受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 &amp; 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-&#8221;skatt&#8221; 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>&#8221;<em><strong>- Tanken är att alla hushåll ska betala, oavsett teknik.</strong></em>&#8221;</p> 
<p>&#8221;<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 &#8211; oavsett hur man väljer att ta emot innehållet. Det skulle också innebära att tv-avgiftskontrollerna skulle kunna upphöra.</em></strong>&#8221;</p> 
<p>&#8221;<strong><em>- För att hålla rågången fri är det viktigt att public service-bolagen &#8211; inte Skatteverket &#8211; fortsatt har ansvaret att samla in avgiften.</em></strong>&#8221;</p> 
<h2>Tankar kring förslaget</h2> 
<ul> 
<li>Det blir likt en straff-&#8221;skatt&#8221; för datoranvändare och alla andra människor. SVT vill få det att låta vettigt genom att bibehålla det som &#8221;Public service&#8221;. 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 &#8211; 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 &#8211; 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 &#8211; 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>

来源

2011-03-16 Jens Törnell

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; 
}

来源

2011-03-16 20:19:04 ted

，对于右侧的工作，但不是在左侧。应该删除两边的边距。 – 2011-03-16 20:28:03

@JensTörnell我编辑了我的文章。您可能会在链接后看到结果。我希望这一次我明白了吧 – ted 2011-03-16 21:23:30

只要改变.gallery属性：

.gallery{ 
    width: 100%; 
    /*margin: 10px 0 50px;*/ 
    margin: 0 -5px; 
    list-style: none; 
}

来源

2011-03-16 20:22:16 Kalessin

这对左侧起作用，但对另一侧起作用。 – 2011-03-16 20:26:20

使用CSS或jQuery在列上摆脱边缘边缘

回答

相关问题