2個內聯div，這兩個50％寬度崩潰？

我該如何讓兩個div以50％的寬度並排坐在一起？2個內聯div，這兩個50％寬度崩潰？

HTML

<div class="big_div"> 
    <div class="pic_1 pix"> 
     <img src="pic1" width="50%" height="30%"/> 
    </div> 
    <div class="pic_2 pix"> 
     <img src="pic2" width="50%" height="30%"/> 
    </div> 
</div>

CSS

.pix{ 
    display:inline; 
}

請評論，在正確的一步任何邏輯幫助。

來源

2014-04-08 13ruce1337

嘗試應用寬度：100％;到big_div也玩float：left; （目前移動和jsfiddle不好玩） –

@aDroidman感謝您的迴應！：D我試着把100％應用到'big_div'，但它沒有幫助。至於'浮動'，我不想浮動...如果我有16個div呢？它不會幫助。 – 13ruce1337

如何使用'display：table'技術 - http://jsfiddle.net/2p2Qd/4/ – davidpauljunior

如果你不希望使用浮動，那麼你可以使用display: table技術。它可以讓你繼續增加更多，他們將完美地跨越容器。

您需要刪除圖像上的內聯百分比寬度和高度。

.big_div { 
    display: table;  
} 
.pix{ 
    display: table-cell; 
    width: 1%; 
    vertical-align: middle; 
} 

img { 
    width: 100%; 
    height: auto; 
}

Demo

來源

2014-04-08 03:40:16 davidpauljunior

這在IE7中不起作用 –

這是非常正確的。正如@JunM指出的那樣， – davidpauljunior

我已經改變了你的html了一下，用這個css：

.big_div {  
    width: 100%; 
    height: 100%; 
} 

img { 
    width:50%; 
    height:30%; 
    float: left; 
}

或者您可以使用display: inline-block和父元素

Fiddle

來源

2014-04-08 03:36:45 JunM

上設置font-size:0不要設置寬度& heig在圖像標籤上。如果你這樣做，將它們保持在100％會扭曲圖像。

使.pix類的寬度爲50％並向左或向右浮動。它不能內聯&保持寬度。 div必須保持display：block纔能有佈局。

反正下面有一個例子http://jsfiddle.net/bamboo/T3p7h/1/

.big_div { 
    width: 60%; 
    margin: 0 auto; 
    background: #00B7FF; 
} 

.pix { 
    width: 50%; 
    float: left; 
}

來源

2014-04-08 03:38:06 Lex

如果你不想使用float，使用display:inline-block（這裏的JSFiddle。）

CSS

.big_div { font-size:0; } 

.pix{ 
    display:inline-block; 
    width:50%; 
} 

.pix img { width:100%; }

我們必須設置字體大小爲0釐米否則會在div之間存在空間（more information）。

來源

2014-04-08 03:57:34 jacksondc

。 '.big_div {font-size：0;}'本身就有效。請參閱評論。 – 13ruce1337

另外請注意，IE8有一些內聯塊的問題，但有一些黑客可以解決它，但請注意。 –

2個內聯div，這兩個50％寬度崩潰？

回答

相關問題