Html 如何在同一列中的两个 DIV 之间制造间隙
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9248176/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a gap between two DIV within the same column
提问by HTML Man
I have two paragraphs. The two paragraphs are located in the same column. Now my question is I need to make the two paragraphs in two separate boxes, down each other. In other words, gap between two boxes coming down each other.
我有两段。两个段落位于同一列中。现在我的问题是我需要将两个段落放在两个单独的框中，并相互放置。换句话说，两个盒子之间的间隙相互下降。
HTML Code
HTML代码
<div class="sidebar">
<div class="box1">
<p>
Text is here
</p>
</div>
<div class="box2">
<p>
Text is here
</p>
</div>
</div>
My CSS Code is
我的 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;
}
Like here
像这儿
回答by Mohammad Naji
Please pay attention to the comments after the 2 lines.
请注意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 */
}
回答by CherryFlavourPez
I'm assuming you want the two boxes in the sidebar to be next to each other horizontally, so something like this fiddle? That uses inline-block, or you could achieve the same thing by floating the boxes.
我假设您希望侧栏中的两个框水平地彼此相邻，所以像这个小提琴一样？这使用inline-block，或者您可以通过浮动框来实现相同的目的。
EDIT- I've amended the above fiddle to do what I think you want, though your question could really do with being clearer. Similar to @balexandre's answer, though I've used :nth-child(odd)instead. Both will work, or if support for older browsers is important you'll have to stick with another helper class.
编辑- 我已经修改了上面的小提琴来做我认为你想要的，尽管你的问题真的可以更清晰。类似于@balexandre 的回答，尽管我已经使用了:nth-child(odd)。两者都可以工作，或者如果对旧浏览器的支持很重要，您将不得不坚持使用另一个帮助类。
回答by balexandre
You can make use of the first-childselector
您可以使用first-child选择器
<div class="sidebar">
<div class="box">
<p>
Text is here
</p>
</div>
<div class="box">
<p>
Text is here
</p>
</div>
</div>
and in CSS
并在 CSS 中
.box {
padding: 10px;
text-align: justify;
margin-top: 20px;
}
.box:first-child {
margin-top: none;
}
回答by Kishan Panchal
you can use $nbsp; for a single space, if you like just using single allows you single space instead of using creating own class
你可以使用 $nbsp; 对于单个空间，如果您喜欢 只使用 single 允许您使用单个空间而不是使用创建自己的类
<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">
<a class="btn btn-primary" href="add_posts.php">Add post</a>
</div>
</form>
回答by Vineela Thonupunuri
#firstDropContainer{
float: left;
width: 40%;
margin-right: 1.5em;
}
#secondDropContainer{
float: left;
width: 40%;
margin-bottom: 1em;
}
<div id="mainDrop">
<div id="firstDropContainer"></div>
<div id="secondDropContainer"></div>
</div>
Note: Adjust the width of the divs based on your req.
回答by Shakeer Hussain
I know this was an old answer, but i would like to share my simple solution.
我知道这是一个旧答案，但我想分享我的简单解决方案。
give style="margin-top:5px"
给 style="margin-top:5px"
<div style="margin-top:5px">
div 1
</div>
<div style="margin-top:5px">
div2 elements
</div>
