如何平分3 div div 1 div

我目前在學習HTML。我試圖在div中添加3張圖片，圖片之間需要有相同數量的空間。這個怎麼做？如何平分3 div div 1 div

例子：https://docs.google.com/drawings/d/1WZdL0WVz-VndX2qP0Ig0S8fZnCGW2k37RHvWXLdgWz0/edit?usp=sharing

的代碼我目前有：

<style type="text/css"> 
.maindiv{ 
    position: relative; 
    width:90%; 
    height:50%; 
    border-style:solid; 
    border-color:Red; 
    border-width:2px; 
    } 

.imgbott{ 
    height:auto; 
    width:auto; 
    max-width:200px; 
    max-height:200px; 
    float:left; 
    text-align: center; 
    } 
</style> 


<body> 
    <div class="maindiv"> 
    <div class="imgbott"> 
     <img src="https://sites.google.com/a/itcld.com.br/portal-de-treinadores/_/rsrc/1377018552616/imagens/images.jpg" alt=""> 
     <a>TESTE</a> 
    </div> 
    <div class="imgbott"> 
     <img src="https://sites.google.com/a/itcld.com.br/portal-de-treinadores/_/rsrc/1377018552616/imagens/images.jpg" alt=""> 
     <a>TESTE</a> 
    </div> 
    <div class="imgbott"> 
     <img src="https://sites.google.com/a/itcld.com.br/portal-de-treinadores/_/rsrc/1377018552616/imagens/images.jpg" alt=""> 
     <a>TESTE</a> 
    </div> 
    </div> 
</body>

代碼乳寧：https://script.google.com/a/macros/itcld.com.br/s/AKfycbyjeAIFhKnAXzvXd8lS3S-ND4H0n63i-FBxr-i9Z1omeFmBYtA/exec

謝謝。

來源

2013-08-21 Renan Otero

請嘗試本教程：[完美合理的CSS網格技術使用內聯塊]（http://code.jelmerdemaat.nl/2012/perfectly-justified-css-grid-technique-using-inline-block/） – Itay

感謝你，它的工作！ –

改變你的CSS到：

.imgbott{ 
    margin: 0px 10px; 
    height:auto; 
    width:auto; 
    max-width:200px; 
    max-height:200px; 
    float:left; 
    text-align: center; 
}

的margin: 0px 10px意味着0px保證金頂部和底部，並10px保證金左右。也許人們會認爲divs之間的margin爲20px，但是有一個叫做「margin collapsing」的效果可以防止這種效果。

來源

2013-08-21 13:59:31 tobspr

這是你尋找 http://jsfiddle.net/Gfnjz/

.box { 
display:table; 
table-layout:fixed; 
min-width:900px;   /* some minimum width is a good idea. */ 
border-spacing:20px 0; /* note that spacing is also applied to right and left ends */ 
background-color:#666; 
margin:0 auto; 
} 
.box div { 
display:table-cell; 
width:33%; 
vertical-align:middle; 
border:1px solid #bbb; 
background-color:#eee; 
padding:30px; 
}

來源

2013-08-21 14:00:28 San

我寧願看到沒有'display：table'的解決方案。不僅僅是由於語義純粹主義的感覺，還因爲表格無法正確地轉換它們的大小。我仍然喜歡這個想法。 –

你可以做這樣的事情：

.divName{ 
    width:300px; 
    display: inline-block; 
    margin: 0 20px 0 0; 
    float: left; 
}

然後最後盒，適用.lastBox類以及強制無保證金，這樣它們就完全居中了，假設你的父容器的居中位置是：

.lastBox{ 
    margin-right: 0; 
}

的HTML：

<div class="divName"> 
    <p>stuff</p> 
</div> 

<div class="divName"> 
    <p>stuff</p> 
</div> 

<div class="divName lastBox"> 
    <p>stuff</p> 
</div>

來源

2013-08-21 14:03:21 tjcss

如果你只希望「imgbott」 div之間出現同一個空間，設置它們的利潤率，而不是width屬性的。

你的類看起來像

.imgbott{ 
    margin: 0px 10px; 
    float: left; 
    text-align: center; 
} 
.imgbott a 
{ 
    display:block; 
}

那麼不要緊，裏面是什麼圖像的寬度，空間總是將圖像之間20像素。

在另外你可以刪除利潤率左使用第一子選擇

.imgbott:first-child { 
    margin-left:0px; 
}

來源

2013-08-21 14:51:15

您可以通過使用inline-block S和text-align: justify實現這一結果的第一形象，與之前和之後加入一些假的內容的div經由僞元素對齊：

.maindiv{ 
    width:90%; 
    border: 2px solid red; 
    text-align: justify; /* turns on justification 'magic' */ 
    line-height: 0; /* removes extra space below divs because of extra line */ 
} 
.maindiv:before {   
    font-size: .1px; 
    content: 'i'; /* adds nearly invisible fake content in the beginning of the line */ 
} 
.maindiv:after {  
    font-size: .1px; 
    content: 'i i'; /* adds nearly invisible fake content in the of the line */ 
    word-spacing: 99in; /* huge word-spacing assures that the 2nd 'i' wraps to the next line making 'justify' work */ 
    background: #ccc; 
} 

.imgbott{ 
    display: inline-block; 
    line-height: 1; /* restore the normal line height inside divs */ 
}

JSFiddle

Optiona LLY，您可以通過添加white-space: nowrap到容器和normal其:after禁止的div的包裝如果容器比它們的寬度的總和較窄：看edited JSFiddle

這種解決方案可能看起來有點棘手，但它的工作原理用於任意數量的任意（可能不同）寬度的塊。

來源

2013-08-21 15:09:27

如何平分3 div div 1 div

回答

相關問題