嵌套设计的div

请原谅我，我的网络编程能力是相当有限，这使得即使google搜索困难的话题，因为我不知道正确的条款..嵌套设计的div

反正我的问题，（这我肯定会措辞怪异，因为我真的不知道如何谈论这个）是：

有没有什么办法可以用html + css实现这个pseduocode？

css文件：

#ropeimage { 
    background-repeat:repeat-x; 
    background:url(images/rope.png); 
} 

#ropetext { 
    <div id="ropeimage"> 
    /* some text properties */ 
}

，然后在HTML文件中

<div id="ropetext">hello</div> 
<div id="ropetext">there</div>

我想问的是，尽管我知道我可以做一些类似于

<div id="ropetext"><div id="ropeimage">hello</div></div> 
<div id="ropetext"><div id="ropeimage">there</div></div>

的原因如果我知道我总是需要这个，为什么不把它藏在css文件中。

如果有人很好奇，我想要做的是构建一个div，它将重复x'rope'图像，然后垂直打印一些文本。我无法将所有这些通常放在一个div中，因为绳子的背景图像会在文本下重复出现，所以我需要两个div，以便图像在文字div上一停止重复。

a crude picture explaining what im trying to do

来源

2013-04-10 Gagan Singh

我相信，而不是使用id要使用class。

所以你的CSS看起来就像这样：

.ropetext { 
    /* properties */ 
}

然后在你的HTML：

<div class="ropetext"></div>

类和一个ID之间的区别是，你要使用一个ID只有一个HTML标记。一个类可以应用于很多标签。

此外，你可以在你的CSS使嵌套样式定义：

.rope { 
    /* properties defining any rope div in general */ 
    position: relative; 
} 

.rope .top { 
    /* properties defining the top of the div */ 
    /* background image stuff goes here */ 
} 

.rope .bottom { 
    /* properties defining the bottom of the div */ 
    position: absolute; 
    bottom: 0px; 
}

在HTML：

<div class="rope"> 
    <div class="top"> 
    </div> 
    <div class="bottom"> 
     Hello 
    </div> 
</div>

我没有测试过这一点，但我相信这是轨道上你正在寻找。

来源

2013-04-10 22:53:36 carmenism

我想我们都误解了他想要做的事情......因为如果你仔细观察他的代码，他似乎只是想重复那个图像......这不是我们都建议的 – KyleK 2013-04-10 22:57:01

他需要的一个大的盒子，有一个重复的图像，由一个较小的div与文本的interupted，他只是手动重复该图像，而不是在一个灵活的容器 – KyleK 2013-04-10 22:57:52

我基本上想嵌套div在CSS内，这样我可以调用一个div在html ，给了我在html中嵌套div的相同效果。为组织的目的 – 2013-04-10 22:58:29

嵌套设计的div

回答

相关问题