Question

我有两段。这两段落在同一列中。现在我的问题是我需要将两个段落放在两个单独的框中，相互之间。换句话说，两个盒子之间的间隙相互下降。

HTML代码

    <div class="sidebar">

                <div class="box1">
                    <p> 
                    Text is here
                    </p>
                </div>

                <div class="box2">
                    <p> 
                    Text is here 
                    </p>
                </div>

     </div>

我的CSS代码是

.sidebar {
    background: red;
    margin: 10px;
    padding: 0 7px 0 7px;
    width: 400px;
    border-radius: 10px;
}

.box1 {
    display: block;
    padding: 10px;
    margin-bottom: 30px;
    text-align: justify;
}

.box2 {
    display: block;
    padding: 10px;
    text-align: justify;
}

喜欢这里 enter image description here

Answer 1

请注意2行后的评论。

.box1 {
    display: block;
    padding: 10px;
    margin-bottom: 100px; /* SIMPLY SET THIS PROPERTY AS MUCH AS YOU WANT. This changes the space below box1 */
    text-align: justify;
}

.box2 {
    display: block;
    padding: 10px;
    text-align: justify;
    margin-top: 100px; /* OR ADD THIS LINE AND SET YOUR PROPER SPACE as the space above box2 */
}

Answer 2

我假设您希望侧边栏中的两个框水平相邻，所以类似this fiddle？这使用inline-block，或者您可以通过浮动框来实现相同的目的。

编辑 - 我已经修改了上面的小提琴来做我认为你想要的事情，尽管你的问题可以真正做得更清楚。与@ balexandre的答案类似，但我使用:nth-child(odd)代替。两者都有效，或者如果对旧浏览器的支持很重要，那么你必须坚持使用另一个帮助类。

Answer 3

您可以使用first-child选择器

<div class="sidebar">
    <div class="box">
        <p> 
            Text is here
         </p>
     </div>
    <div class="box">
        <p> 
            Text is here
         </p>
     </div>
</div>

和CSS

.box {
    padding: 10px;
    text-align: justify;
    margin-top: 20px;
}
.box:first-child {
    margin-top: none;
}

示例：http://jsbin.com/ozarot/edit#javascript,html,live

Answer 4

您可以使用$ nbsp;如果您喜欢一个空间 只使用一个即可让您一个空格，而不必使用创建自己的类

    <div id="bulkOptionContainer" class="col-xs-4">
        <select class="form-control" name="" id="">
            <option value="">Select Options</option>
            <option value="">Published</option>
            <option value="">Draft</option>
            <option value="">Delete</option>
        </select>
    </div>

    <div class="col-xs-4">

        <input type="submit" name="submit" class="btn btn-success " value="Apply">
         &nbsp;
        <a class="btn btn-primary" href="add_posts.php">Add post</a>

    </div>


</form>

CLICK ON IMAGE

Answer 5

我知道这是一个老答案，但是我想分享我的简单解决方案。

给予style="margin-top:5px"

<div style="margin-top:5px">
  div 1
</div>
<div style="margin-top:5px">
  div2 elements
</div>

div3元素

Answer 6

#firstDropContainer{
float: left; 
width: 40%; 
margin-right: 1.5em; 

}

#secondDropContainer{
float: left; 
width: 40%;
margin-bottom: 1em;
}



<div id="etfDropdown">
    <div id="firstDropContainer"></div>
    <div id="secondDropContainer"></div>
</div>

Note: Adjust the width of the divs based on your req.

如何在同一列中的两个DIV之间建立间隙

6 个答案: