位置div如下，没有浮动

Question

我有一个看起来像这样的网页：

我想知道是否可以为2个外部div设置不同的margin-top值。目前，我是否设置保证金：x％或保证金：[值] px两个外部div将从保证金中获得价值。我希望它只影响我设置的那个。

我提到没有浮动，因为我遇到浮动和边距/宽度属性的问题，但是如果你能用漂浮物想出一个合适的解决方案，那就会漂浮我的船。 ：）

非常感谢。

顺便说一下，我是一个CSS新手，所以对我来说很容易

Answer 1

你是说这样的意思吗？

<强> JSFIDDLE

HTML

<div class="container">
    <div class="aaa">first</div>
    <div class="bbb">second</div>
    <div class="ccc">third</div>
</div>

<div class="container">
    <div class="aaa">first</div>
    <div class="bbb">second</div>
    <div class="ccc">third</div>
</div>

CSS

div:not(.container){
    margin: 10px 20px 30px 20px;
    background: white;
    height: 100px;
}

.container{
    float: left;
    background: black;
    padding: 20px;
    width: 200px;
    margin-top: 25px; /*sets both divs same top*/
}

.container:not(:first-child){
    margin-left: 50px;   
    /*margin-top: 25px*/ /*sets only second div or all others down and leaves
                           the first div like it is. but this for you have to
                           delete the margin-top entry from .container{  */
}

但实际上我会使用不同的类，所以你可以用自己的css配置设置每个div：）

像：

.myFirstDivContainer{
    /* pos data here */
}
.mySecondDivContainer{
    /* pos data here */
}

等等

修改

参见 :not() compabilitys

您也可以使用:nth-child()之类的

div.container:nth-child(0){
    /* data for your first div */
}

div.container:nth-child(1){
    /* data for your second div */
}

依旧......

Answer 2

在你的情况下，与margin-top一样好的东西可能是：

.second-div {
    position: relative;
    top: 15px;
}

这将相对于其默认位置向下移动第二个div 15px。

顺便说一句，你应该习惯JSFiddle，它是一个非常好的原型设计工具，远比制作非交互式图纸好得多：）

Here's your drawing as a fiddle!

Answer 3

你可以在html元素的class属性中使用多个css类：

<div class="outer-div-wrapper">some content</div>
<div class="outer-div-wrapper larger-margin">some content</div>

然后制定了一些css规则：

/* this will give all divs with class 'outer-div-wrapper' a margin-top of 10px */
.outer-div-wrapper {
  margin-top: 10px; 
  display: inline-block; 
  margin-right: 10px;
} 
/* This will increase the margin size for the divs with the extra 'larger-margin' class */
.outer-div-wrapper.larger-margin {
  margin-top: 15px;
}