我需要2個並排的盒子，它們之間沒有空格由HTML和CSS組成

Question

如何將盒子分成？我需要一個左側的盒子和右側的另一個盒子，兩個盒子之間沒有任何空間。這兩個盒子只能用一條線隔開。兩個盒子應該並排放置。使用HTML或CSS。

Answer 1

對於該行用作分隔符，可以使用右側的邊框，但我建議對右側的框使用左側的邊框。 只需使用兩個帶顯示的div：內聯屬性和每個寬度：50％;

Answer 2

<style> 
.div1{ 
    width:45%; 
    height:50%; 
    float:left; 
    background-color: blueviolet; 
    } 
    .div2{ 
     background-color: aquamarine; 
    width:45%; 
    height:50%; 
    float:left; 
    } 
</style> 
<div class="div1"></div> 
<div class="div2"></div> 

Answer 3

可選地，使用一個Flexbox的用隔離div。

.container { 
 
    display: flex; 
 
    height: 3em; 
 
} 
 

 
.left { 
 
    background-color: blue; 
 
    width: 40%; 
 
} 
 

 
.separator { 
 
    width: 1px; 
 
    background-color: darkgray; 
 
} 
 

 
.right { 
 
    background-color: red; 
 
    width: 40%; 
 
}

<div class="container"> 
 
    <div class="left"></div> 
 
    <div class="separator"></div> 
 
    <div class="right"></div> 
 
</div>

Answer 4

試試這個：

.c1, .c2 { 
 
    width: 200px; 
 
    height: 200px; 
 
    float: left; 
 
} 
 

 
.c1 { 
 
    background-color: red; 
 
} 
 

 
.c2 { 
 
    background-color: blue; 
 
    border-left:1px solid #000; 
 
}

<div class="c1"></div> 
 
<div class="c2"></div>