0

我试图在一个类中输出多个元素，但我无法将页面顶部与实际元素分开。

我尝试将每个图像分开div.element img:not(:nth-of-type(1)){，div.element img:nth-of-type(1){但没有奏效。我将如何操纵第一个元素之间的空间，而不是其他元素之间的空间？

<div class="element">
<a href="http://website.com" target="_blank" border="0"><img src="http://website.com"></a>
</div>

<div class="element">
<div id="Projecttitle" class="Projecttitle">Test Title</div>
</div>


<div class="element">
<div id="Projectdescription" class="Projectdescription">Test description</div>
</div>
<div class="element">
<a href="http://website.com" target="_blank" border="0"><img src="http://website.com"></a>
</div>

<div class="element">
<div id="Projecttitle" class="Projecttitle">Test Title</div>
</div>


<div class="element">
<div id="Projectdescription" class="Projectdescription">Test description</div>
</div>
4

3 回答 3

1 
div.element:first-child {
  padding-top: 0;
}

div.element {
  padding-top: 10px;
}
于 2012-11-24T07:42:05.120 回答
1

您的 HTML 没有意义。如果你保持逻辑上属于一起的元素，你会得到更容易设计样式的语义代码，如下所示：

<div class="project">
    <div class="image">
        <img src="#" alt="image">
    </div>

    <div class="text">
        <h1>Test Title</h1>  
        <p>Test description</p>
    </div>
</div>

还有一些 CSS：

.image {
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 50%;
    padding: 10px 20px 10px 0;
}

.text {
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 50%;
    padding: 10px 0 10px 20px;
    border-left: 1px solid black;
}

.project:first-child .image,
.project:first-child .text {
    padding-top: 0;
}

.project:last-child .image,
.project:last-child .text {
    padding-bottom: 0;
}

JSFiddle

那应该让你开始！

于 2012-11-24T11:18:38.837 回答
0

试试这个：

div.element:nth-of-type(1) img {
  padding-top: /* some value */;
}

和类似的:nth-of-type()伪类作用于其父上下文中的元素。换句话说，它只评估直接兄弟姐妹。您的各个<img>元素不是彼此的兄弟姐妹，因为它们有不同的父母。

于 2012-11-24T07:24:43.853 回答