垂直分隔间距 [英] Vertical Div Spacing

问题描述

如何以最少量的代码水平分配3个div？

我有3个具有相同类的div，我需要水平分配它们，在每个div之间有19个像素的空间。

我现在的解决方案是给第一个2个div右边界19个像素，并为第三个div分配一个单独的类这给了它19个像素的左边距。

这样做可以完成任务，但我觉得可能有更好的方法来完成它。理想情况下，所有3个div仍然具有相同的类别。

http://jsfiddle.net/thirtydot/q6Hj8/

  .yourDivClass + .yourDivClass {
 margin-left：19px 
} 
  

使用邻接兄弟组合符来应用 margin-left 添加到 .yourDivClass 之前的每个 .yourDivClass - 换句话说，除了第一个之外的所有

How do you horizontally distribute 3 divs with the least amount of code?

I have 3 divs that have the same class, and I need to distribute them horizontally, with 19 pixels of space between each div.

My solution currently is to give the first 2 divs a right margin of 19 pixels, and assign a separate class to the 3rd div that gives it a left margin of 19 pixels.

This gets the job done, but I feel like there may be a better way of doing it. Ideally, all 3 divs would still have the same class.

解决方案

See: http://jsfiddle.net/thirtydot/q6Hj8/

.yourDivClass + .yourDivClass {
    margin-left: 19px
}

That uses the adjacent sibling combinator to apply margin-left to every .yourDivClass which is preceded by a .yourDivClass - in other words, all except the first.

这篇关于垂直分隔间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！