簡化CSS嵌套的div

我有一個DOM這樣的：簡化CSS嵌套的div

<div class='container'> 
    <div class='visual'> 
    indent indicator 
    </div> 
    <div class='nomove'> 
    text in this class is always left-aligned 
    </div> 
    <div class='container'> 
    <div class='visual'> 
     indent indicator 
    </div> 
    <div class='nomove'> 
     text in this class is always left-aligned 
    </div> 
    <!-- more container nesting possible --> 
    </div> 
</div>

的CSS是

.container .visual { 
    margin-left:20px; 
} 
.container .container .visual { 
    margin-left:40px; 
} 
.container .container .container .visual { 
    margin-left:60px; 
}

這對於每個深度級別做，當然也是愚蠢的。

這裏有一個jsfiddle（更新：多結構，多行文字）

是否有保持樹形HTML並且具有相同的效果簡單的解決方案？

來源

2013-04-16 bebbi

將你的'.nomove'文本始終佔用的垂直空間相同的量，即是一條線？ – ASGM

.nomove需要是可能有多行文字的塊元素 – bebbi

此代碼工作正常：

<html> 
<head> 
<style type="text/css"> 
    .container { 
     margin-left: 20px; 
    } 

    .nomove { 
     position:absolute; 
     left: 0px; 
    width: 100px; 
    } 

    .dummie { 
     color:transparent; 
     width: 100px; 
    } 
} 
</style> 
</head> 
<body> 
<div class="container"> 
    <div class="visual">indent indicator</div> 
    <div class="nomove">text in this class is always left-aligned</div> 
    <div class="dummie">text in this class is always left-aligned</div> 
    <div class='container'> 
     <div class='visual'>indent indicator</div> 
     <div class='nomove'>text in this class is always left-aligned text in this class is always left-aligned text in this class is always left-aligned text in this class is always left-aligned</div> 
     <div class="dummie">text in this class is always left-aligned text in this class is always left-aligned text in this class is always left-aligned text in this class is always left-aligned</div> 
    </div> 
</div> 
</body> 
</html>

的.nomove DIV移動與位置：絕對和左：0像素左側。 dummie div在兩個div之間產生差距，因爲position：absolute沒有高度。

PS：對不起，我的英語;）

編輯：

現在dummie和nomove DIV具有相同的文字，相同的寬度，但dummie是透明的。

來源

2013-04-16 09:37:27

如果一個給定的'.nomove'的垂直高度發生變化（我有一個類似的想法 - 請參閱我對OP的問題），這將不起作用。 – ASGM

如果.nomove div具有不同的高度，則應將相同的文本添加到dummie元素中並使其透明（顏色：透明）。兩個divs（dummie和nomove）也應該具有相同的寬度。 –

這是合理的，但這不是你的答案目前所表示的。 – ASGM

您可以刪除一些container類，只需依靠三個visual類。

HTML

<div> 
    <div class='visual1'> 
    indent indicator 
    </div> 
    <div class='nomove'> 
    text in this class is always left-aligned 
    </div> 
    <div> 
    <div class='visual2'> 
     indent indicator 
    </div> 
    <div class='nomove'> 
     text in this class is always left-aligned 
    </div> 
    <div> 
     <div class='visual3'> 
     indent indicator 
     </div> 
     <div class='nomove'> 
     text in this class is always left-aligned 
     </div> 
     <!-- more nested containers possible --> 
    </div> 
    </div> 
</div>

CSS

.visual1 { 
    margin-left:20px; 
} 
.visual2 { 
    margin-left:40px; 
} 
.visual3 { 
    margin-left:60px; 
}

來源

2013-04-16 09:19:30

這雖然不是很簡單嗎？ – davidb

@davidb我認爲這是因爲如果你在dom結構中添加另一個容器元素，你不需要修改你的css來說明額外的節點。此外，如果您刪除容器元素，您仍然會擁有相同的樣式。這個標記不依賴於DOM的結構。原始CSS依賴於DOM內的元素的特定嵌套。 –

同意，html中的聲明式方法是一個很好的選擇。但是，樹數據來自後端，結構可能更復雜。更新小提琴給一個想法。我想避免在前端計算所有這些類名。 – bebbi

你可以這樣說：http://jsfiddle.net/TMAXa/3/

這是從什麼@KevinBowersox說承擔。但如果CSS上有增量，則不需要使用盡可能多的HTML代碼。

<div class='visual1'> 
    indent indicator 
</div> 
<div class='nomove'> 
    text in this class is always left-aligned 
</div> 

<div class='visual2'> 
    indent indicator 
</div> 
<div class='nomove'> 
    text in this class is always left-aligned 
</div> 

<div class='visual3'> 
    indent indicator 
</div> 
<div class='nomove'> 
    text in this class is always left-aligned 
</div>

來源

2013-04-16 09:28:34 Andrew

我同意從DOM中移除儘可能多的信息是很好的。然而，在這裏我可能不得不把這個邏輯放到CSS中（我不知道前面的最高visualN，而且，一個簡單的「delta-margin」會比給每個視覺類分配絕對邊緣更好）。查看更新的小提琴 – bebbi

您將需要使用一些jQuery或JavaScript來確定下一個視覺類的位置，並以這種方式應用邊距。 – Andrew

我知道這是不是一個很優雅的解決方案：

.container{ 
    padding:20px 0 0 20px; 
} 

.nomove { 
    position:absolute; 
    left:10px; 
}

DEMO

來源

2013-04-16 09:49:10 xpy

在.nomove中還存在多行文字的問題 - 請參閱我更新的小提琴。 – bebbi

如果一個給定的.nomove的垂直高度發生變化（我有一個類似的想法 - 請參閱我對OP的問題），這將不起作用。 – ASGM

簡化CSS嵌套的div

回答

相關問題