Question

好的，我有一个问题。我正在使用960 gs，你可以从代码中看到它至少对我来说是一个复杂的布局。我的一部分问题是应该有一个10px排水沟。但有些div没有。因此，要实现布局，我希望我必须为一些div添加10px的上边距。那么我需要在div中添加悬停效果填充颜色更改。好吧你可以在我添加10px的div上看到一个边界绕过边缘。没有实现我想要的。我设置了一个类和一些jquery，它将删除边距但是当你将鼠标悬停在那些div上时它们会移动/移动。再一次没有达到我想要的效果。请帮助 - 我如何修复我的网格系统，以便我不必添加上边距或如何添加不包括我的边距的填充。我的HTML在下面，但我将所有代码，js和css放在jsfiddle上，请参阅：http://jsfiddle.net/penrysh/mr99962t/

<div class="page">
<div class="container_14">
<div class="grid_6 alpha omega">
<div class="grid_6 alpha">
<article class="grid_4 alpha results">
<div id="bulletin" class="tooltip" title="Tip1">
<h2>Bulletin Board</h2>
<p></p>
</div>
</article> <!-- end Bulletin Board -->  
<article class="grid_2 omega results">
<div id="take5" class="tooltip" title="Tip2">
<ul>
<li><h3>Take 5</h3></li>
<li><img src="http://placehold.it/75x75" alt="Learning Break icon" /></li>
<li><a href="#take5Box" title="Take 5 Learning Break" class="lightbox">Learning Break</a></li>
<div id="take5Box">
<h3>Take 5</h3>
 <p>More content...</p>
<a href="#">Take 5</a>
</div>
</ul>
</div>
</article> <!-- end Take 5 -->
<article class="grid_2 omega results1">
<div id="longTerm" class="tooltip" title="Tip3">
<ul>
<li><h3>Long Term</h3></li>
<li><img src="http://placehold.it/75x75" alt="Long Term Learning icon" /></li>
<li><a href="#longTermBox" title="Long Term Learning" class="lightbox">Learning</a></li>
<div id="longTermBox">
<h3>Long Term Learning</h3>
<p>More content...</p>
<a href="#">Long Term Learning</a>
</div>
</ul>
</div>
</article> <!-- end Long Term -->
<div class="clear"></div>
<article class="grid_6 alpha omega results1">
<div id="career" class="tooltip" title="Tip4">
<h2>Career Insight: Highlight your work!</h2>
<p>Create a Sharepoint blog where you can link to, upload, and discuss your work. It all becomes part of your professional portfolio.</p>
</div>
</article> <!-- end Career Insight --> 
</div>
</div>

<div class="grid_8 omega">
<div class="grid_8 omega">
<article class="grid_8 alpha omega results">
<div id="whatIs" class="tooltip" title="Tip5">
<h2>What is the Learning and Development Network?</h2>
</div>
</article> <!-- end What is -->
<div class="clear"></div>
<article class="grid_6 alpha results1">
<div id="featured" class="tooltip" title="Tip6">
<h2>Featured Courses</h2>
<table>
<tbody>
<tr>
<td><img src="http://placehold.it/75x75" alt="Health Care 101" /></td>
<td><a href="#"></a></td>
</tr>
<tr>
<td><img src="http://placehold.it/75x75" alt="Our Values" /></td>
<td><a href="#">Our Values</a></td>
</tr>
</tbody>
</table>
</div>
</article> <!-- end Featured courses -->

<article class="grid_2 omega results1">
<div id="kl" class="tooltip" title="Tip7">
<ul>
<li><img src="http://placehold.it/75x75" alt="" /></a></li>
<li><a href="#klBox" title="" class="lightbox"></a></li>
<div id="klBox">
<h3></h3>
<p>More content...</p>
<a href="#"></a>
</div>
</ul>
</div>
</article> <!-- end KL -->   
<article class="grid_2 omega results1">
<div id="myLearning" class="tooltip" title="Tip8">
<ul>
<li><img src="http://placehold.it/75x75" alt="" /></li>
<li><a href="#myLearningBox" title="M" class="lightbox">My Learning</a></li>
<div id="myLearningBox">
<h3></h3>
<p>More content...</p>
<a href="#"></a>
</div>
</ul>
</div>
</article> <!-- end -->
</div>
</div>
<div class="clear"></div>
</div> <!-- end Container -->
</div> <!-- end Page -->

Answer 1

请看一下 jsFiddle ，我相信这就是您的需求。我所做的是，我为margin-top类的每个元素设置了10px results1，并移除了margin-top之前的所有10px您为不同元素设置的{1}}。由于您要为results1_hover类设置边框，因此margin-top也需要应用于它，而不是其子容器。

如何创建一个边框，用于勾勒div减去边距

1 个答案: