顯示2個div並排填充可用寬度

-3

我想顯示2個div並排填充可用寬度。問題是，當我將每個設置爲50％時，它們都會垂直堆疊。將它們中的一個設置爲49％可以解決這個問題，但是這感覺就像是一個瘋子。有一個更好的方法嗎？顯示2個div並排填充可用寬度

#red { 
 
    display:inline-block; 
 
    background-color:red; 
 
    width:50%; 
 
} 
 

 
#green { 
 
    display:inline-block; 
 
    background-color:green; 
 
    width:50%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
    <div class="panel panel-default sc-panel"> 
 
     <div class="panel-heading">My Panel</div> 
 
     <div class="panel-body" style="padding:0"> 
 
       <div id="red">red</div> 
 
       <div id="green">green</div> 
 
     </div> 
 
    </div

- 編輯 -

是的，這是一個重複的問題。只是我的意見，但我不喜歡以前的答案：（1）將font-size設置爲零，（2）將html代碼放在同一行上，可能使其不易讀取

來源

2017-04-04 Skyler

引導？不是bootstrap已經覆蓋了實現你需要的例子嗎？ –

將div放在同一行上的另一種方法是，在第一個div結束後立即開始註釋空白HTML空註釋，並在第二個div開始前立即結束：'

blah

<！ - * new line entered here * - >

blah2

' – TylerH

但我猜OP不希望他的html被篡改。 –

內聯元素對空白在你的代碼，所以只是將其刪除：

#red { 
 
    display: inline-block; 
 
    background-color: red; 
 
    width: 50%; 
 
} 
 

 
#green { 
 
    display: inline-block; 
 
    background-color: green; 
 
    width: 50%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 
<div class="panel panel-default sc-panel"> 
 
    <div class="panel-heading">My Panel</div> 
 
    <div class="panel-body" style="padding:0"> 
 
    <div id="red">red</div><div id="green">green</div> 
 
    </div> 
 
    </div

來源

2017-04-04 15:22:33 j08691

他們爲什麼會「敏感」？（我可以看到他們「是」），但究竟是什麼呢？ – mayersdesign

Downvoter關心評論？ – j08691

@mayersdesign這個詞意味着他們迴應外部刺激。 AKA等外部因素影響它們。 – TylerH

浮動第一個div治癒這個，雖然說實話，我不就是知道爲什麼！我看不到任何理由 - 除了瀏覽器的怪癖 - 爲什麼你的代碼不應該像現在這樣工作。

#red { 
 
    display:inline-block; 
 
    background-color:red; 
 
    width:50%; 
 
    float: left; 
 
} 
 

 
#green { 
 
    display:inline-block; 
 
    background-color:green; 
 
    width:50%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
    <div class="panel panel-default sc-panel"> 
 
     <div class="panel-heading">My Panel</div> 
 
     <div class="panel-body" style="padding:0"> 
 
       <div id="red">red</div> 
 
       <div id="green">green</div> 
 
     </div> 
 
    </div

來源

2017-04-04 15:23:01 mayersdesign

這將導致紅色div與綠色div的寬度重疊1％（或接近1％）。在這個例子中不是很明顯，但實際上它可能會給訪問者帶來難看的體驗。 – TylerH

顯示2個div並排填充可用寬度

回答

相關問題