如何在同一列內的兩個DIV之間製作縫隙

我有兩個段落。這兩個段落位於同一列。現在我的問題是我需要在兩個單獨的框中將兩個段落對齊。換句話說，兩個盒子之間的差距相互交織。如何在同一列內的兩個DIV之間製作縫隙

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

來源

2012-02-12 HTML Man

不是真的跟着你想要什麼，但能不只是增加保證金那些盒子？ – Ben 2012-02-12 10:47:14

不太明白「兩個盒子之間的差距彼此下降」 – Scott 2012-02-12 10:48:02

@Scott我的意思是box1先然後是box2，但它應該是它們之間的差距 – 2012-02-12 10:50:49

請注意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 */ 
}

來源

2012-02-12 10:48:45

非常感謝，它真的幫助我 – 2012-02-12 11:53:47

或者更好的是：'.box {display：block;填充：10px; text-align：justify; margin：100px 0; }' – 2012-02-12 12:47:29

我假設你想在側邊欄的兩個箱旁邊彼此水平，所以像this fiddle？這使用inline-block，或者您可以通過浮動框來實現相同的目的。

編輯 - 我已經修改了上面的小提琴來做我認爲你想要的東西，儘管你的問題可以通過更清晰的方式來解決。類似於@ balexandre的回答，儘管我用:nth-child(odd)代替。兩者都可以工作，或者如果對舊版瀏覽器的支持很重要，則必須堅持使用另一個輔助類。

來源

2012-02-12 10:51:22 CherryFlavourPez

應該垂直！ – 2012-02-12 10:53:49

@HTMLMan您的評論和您的問題不一致！兩個div應該水平放置還是垂直放置？ – 2012-02-12 11:04:53

@smhnaji垂直！ – 2012-02-12 11:08:04

您可以使用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

來源

2012-02-12 10:55:50 balexandre

它應該完全分開。它應該是這樣的紅色背景Para1 背景的邊欄紅色背景para2 – 2012-02-12 11:05:03

非常感謝。它現在正在工作。謝謝 – 2012-02-12 11:27:30

如何在同一列內的兩個DIV之間製作縫隙

回答

相關問題