我需要並排放置2個div，就好像它們會顯示爲一個div一樣

-1

我有一個粉紅色的容器，裏面有2個div，紅色和綠色並排放置，並顯示：inline-block;規則在css.i需要這個divs佔50％寬度，以便它們顯示爲一個div。但是當我將寬度設置爲50％時，綠色跳轉到紅色div下面。當我將寬度設置爲49％時，它跳轉到相同但它們之間存在差距，這不是我想要的，有的身體幫助。我需要並排放置2個div，就好像它們會顯示爲一個div一樣

我需要他們堅持收集一行，就好像他們顯示爲一個單獨的div。我會把我在這裏的代碼筆鏈接... http://codepen.io/ShamZ/pen/gLXBow HTML

<div class="container"> 
    <div class="box"> 
    </div> 
    <div class="box2"> 
    </div> 
</div>

CSS

.container{ 
width:800px; 
height:800px; 
background-color:pink; 
} 
.box{ 
display:inline-block; 
width:50%; 
height:50px; 
background-color:red; 
} 
.box2{ 
display:inline-block; 
width:50%; 
height:50px; 
background-color:green; 
}

來源

2016-11-30 Shamseer Ahammed

與我們的代碼的問題是，HTML檢測容器中的盒子元素之間的空白 - 因此，它看起來像容器中沒有足夠的空間2寬度爲50％的Div。 - 將它們設置爲48％或更小，並且你會看到它們將適合一條線。

單溶液可以是：

.container{ 
 
    width:800px; 
 
    height:800px; 
 
    background-color:pink; 
 
    display:inline-block; 
 
font-size: 0; 
 
} 
 

 

 
.box{ 
 
    display:inline-block; 
 
    width:50%; 
 
    height:50px; 
 
    background-color:red; 
 
} 
 
.box2{ 
 
    display:inline-block; 
 
    width:50%; 
 
    height:50px; 
 
    background-color:green; 
 
}

<div class="container"> 
 
    <div class="box"> 
 
    </div> 
 
    <div class="box2"> 
 
    </div> 
 
</div>

然後設置另一個字體大小在子元素

來源

2016-11-30 20:24:14 xdr34m

這是一個已知問題，即出現inline-block元素原因利潤率之間的空白。看一看該示例（固定）

.container{ 
 
width:800px; 
 
height:800px; 
 
background-color:pink; 
 
} 
 
.box{ 
 
display:inline-block; 
 
width:50%; 
 
height:50px; 
 
background-color:red; 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.box:nth-of-type(2) { 
 
    background-color: green; 
 
    }

<div class="container"> 
 
    <div class="box"> 
 
    </div><div class="box"> 
 
    </div> 
 
</div>

來源

2016-11-30 20:08:05 junkfoodjunkie

轉爲浮筒，ALA http://codepen.io/davewallace/pen/aBVQLN

inline-block可能導致可能需要進一步的變通方法奇數間隔。

使用浮動元素時，您可以簡單地達到所需的效果，您可能需要調查在包裝浮動元素的容器上使用「clearfix」。

來源

2016-11-30 20:08:24 danjah

添加font-size:0到父元素.container

.container{ 
 
    width:800px; 
 
    height:800px; 
 
    background-color:pink; 
 
    font-size:0; 
 
} 
 

 

 
.box{ 
 
    display:inline-block; 
 
    width:50%; 
 
    height:50px; 
 
    background-color:red; 
 
} 
 
.box2{ 
 
    display:inline-block; 
 
    width:50%; 
 
    height:50px; 
 
    background-color:green; 
 
}

<div class="container"> 
 
    <div class="box"> 
 
    </div> 
 
    <div class="box2"> 
 
    </div> 
 
</div>

來源

2016-11-30 20:32:21 Rohit

我需要並排放置2個div，就好像它們會顯示爲一個div一樣

回答

相關問題