如何使用CSS在兩個塊之間留有一定間隙？

我想什麼，達到如下設計：如何使用CSS在兩個塊之間留有一定間隙？

enter image description here

兩個具有一定差距其間圍繞頁面中線對齊文本塊（見圖片）。

我試圖玩float財產，使用margin和padding來獲得差距，但我不能讓他們居中。

編輯： 我忘了指示箭頭顯示了可調整大小的部分：因此，頁面寬度必須改變大小，而文字本身是沒有，但文字是動態的內容，可以從一頁一頁地改變，所以沒有辦法以像素爲單位定義常量寬度。

來源

2012-02-25 Alexander Galkin

您是否嘗試過的表對齊相結合？ – Anton 2012-02-25 16:25:02

哪些部件是固定寬度的，哪些部件在窗口大小調整時會改變寬度？ – thirtydot 2012-02-25 16:31:41

@Anton：是的，表格是當前的解決方案，但是我想消除設計中我不需要它們的所有表格並使用CSS。 – 2012-02-25 16:42:27

您可以用margin: 0 auto居中塊display: table-cell與它的孩子比例padding做這樣的

<div id="wrapper">  <!-- wrapper will be in the middle of the page --> 
    <div id="box1"></div> <!-- Your First Box --> 
    <div id="box2"></div> <!-- Second Box --> 
</div> 

#wrapper { width: 1000px; margin: 0 auto } 
#box1 { width: 400px; float: left; } 
#box2 { width: 400px; float: right; } 
/* There Will be 200px gap in between of two boxes */

來源

2012-02-25 16:34:07 Ilja

非常感謝你！我忘了提及頁面寬度必須調整大小。文本是動態的，可以具有不同的寬度，因此無法將其寬度預先設置爲恆定值。抱歉在開始時不提及它！ – 2012-02-25 16:44:06

上述解決方案仍將以百分比形式工作，例如： body {width：100％; } #wrapper {width：80％;保證金：0汽車; } ＃box1 {width：45％;向左飄浮; } ＃box2 {width：45％; float：right; } – ellawren 2012-02-25 20:25:10

使用display: table。如果需要，請爲中心塊設置百分比width。

來源

2012-02-25 16:56:01

類似this？

HTML：

<!doctype html> 
<html> 
<body> 
<div class="wrapper"> 
<div class="column"> 
<div class="column1"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in libero interdum ante vulputate viverra non vehicula sapien. Sed ac posuere sapien. Morbi a massa leo, sed hendrerit odio. Aliquam in diam in mauris elementum fringilla. Maecenas vestibulum massa at massa imperdiet eu venenatis velit sagittis. Donec nec libero vel ipsum mattis cursus. Ut vel tortor id lectus rhoncus laoreet. Aliquam volutpat rhoncus arcu et euismod. Phasellus pulvinar condimentum lacus non dictum. In nisi lorem, ultrices quis convallis vel, consectetur vulputate arcu. Quisque malesuada bibendum nulla, at facilisis quam facilisis sed. Pellentesque pellentesque, mi ut dictum suscipit, arcu nisl consequat urna, vitae auctor arcu quam a felis. Proin consectetur fermentum leo sit amet faucibus. 
</div> 
</div> 
<div class="column"> 
<div class="column2"> 
Maecenas quis interdum est. Phasellus ut erat nec ligula blandit cursus. Nulla laoreet viverra interdum. Etiam sagittis porttitor elit id egestas. Morbi at nunc turpis, ut interdum magna. Nam eget dui metus. In aliquet dui non nisl porttitor et pretium nisi tristique. Vivamus non eros ut ligula pharetra porta. Suspendisse suscipit dignissim nibh, vitae auctor ligula condimentum et. In sit amet ultrices sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
</div> 
</div> 
</div> 
</body> 
</html>

CSS：

body {padding:30px;} 
.wrapper {margin:30px auto;} 
.column {width:50%;float:left;} 
.column1 {padding-right:20px;} 
.column2 {padding-left:20px;}

來源

2012-02-25 18:52:53

爲左塊，設置左邊距爲自動。對於右側的塊，請設置右側。像這樣：

#leftBlock { 
    margin-left: auto; 
} 

#rightBlock { 
    margin-right: auto; 
}

這將它們放在屏幕的中心。要在其他保證金增加空間的塊之間，設定一些明確的量：

#leftBlock { 
    margin-left: auto; 
    margin-right: 5%; 
} 

#rightBlock { 
    margin-right: auto; 
    margin-left: 5%; 
}

來源

2015-07-07 18:11:32 corpico

如何使用CSS在兩個塊之間留有一定間隙？

回答

相關問題