如何設置inline-block的元素

Question

我的例子之間的權利間距：

其possilble設置DIV內聯元素之間的間距相同。因爲自動寬度不起作用。 這是我走到這一步：

HTML

<div id="frame"> 
     <div class="block">1</div> 
     <div class="block">2</div> 
     <div class="block">3</div> 
     <div class="block">4</div> 
    </div> 
    </div> 

CSS

#frame div { 
    background-color: brown; 
    padding-left: 20%; 
    padding-right: 20%; 
    width: auto; 
    margin: 5px; 
    display: inline-block; 
} 

Answer 1

幀的寬度是全屏和塊的寬度都以適應這裏面框架，它並不那麼重要。

在這種情況下，你可以避開還不是很好的支持flex和使用百分比來代替：

• 給20％width到每個.block的div
• 得到4％margin-right到每個.block div
• 給第一個.block額外4％margin-left或設定的4％padding-left上#frame

當然，只要他們加起來最大的#frame 100％你可以改變這些值。

#frame { 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0 0 0 4%; 
 
} 
 

 
#frame div { 
 
    display: inline-block; 
 
    background-color: brown; 
 
    width: 20%; 
 
    margin: 1em 4% 1em 0; 
 
}

<div id="frame"> 
 
     <div class="block">1</div> 
 
     <div class="block">2</div> 
 
     <div class="block">3</div> 
 
     <div class="block">4</div> 
 
    </div> 
 
</div>

Answer 2

Flexbox，就可能是你最好的辦法，但要知道，舊的瀏覽器不支持它。

#frame div { 
    background-color: brown; 
    width: 20%; 
    text-align:center; 
} 

#frame { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -moz-flex; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-justify-content: space-around; 
    justify-content: space-around; 
} 

https://jsfiddle.net/02mp1yxv/

Answer 3

的Flex使這個簡單的：

#frame div { 
 
    background-color: brown; 
 
    margin: 5px; 
 
    flex: 1; 
 
    padding:1em; 
 
    color:silver 
 
} 
 

 
#frame { 
 
    display: flex; 
 
}

<div id="frame"> 
 
    <div class="block">1</div> 
 
    <div class="block">2</div> 
 
    <div class="block">3</div> 
 
    <div class="block">4</div> 
 
</div>

對於單行表做這項工作太舊的瀏覽器：

#frame div { 
 
    background-color: brown; 
 
    display:table-cell; 
 
    padding:1em; 
 
    color:silver 
 
} 
 

 
#frame { 
 
    display: table; 
 
    width:100%; 
 
    border-spacing: 10px 0;; 
 
}

<div id="frame"> 
 
    <div class="block">1</div> 
 
    <div class="block">2</div> 
 
    <div class="block">3</div> 
 
    <div class="block">4</div> 
 
</div>

或網格最新的瀏覽器（其中的列號是已知的：

#frame div { 
 
    background-color: brown; 
 
    padding: 1em; 
 
    color: silver 
 
} 
 

 
#frame { 
 
    display: grid; 
 
    grid-template-columns: 1fr 1fr 1fr 1fr; 
 
    grid-column-gap: 10px; 
 
}

<div id="frame"> 
 
    <div class="block">1</div> 
 
    <div class="block">2</div> 
 
    <div class="block">3</div> 
 
    <div class="block">4</div> 
 
</div>