如何將兩個div顯示在同一行上

為了在頁面上實現上圖所示的方法,你會怎么做。

?????? 自認為對div+css已經很熟悉了,每次寫兩列式的布局都是采用float屬性來實現,但是,不使用float呢,要怎么做到。

??????? 今天被男朋友問到了,趕緊去百度了一下,又發現了兩種方法可以來實現,下面我來整合一下我寫的三種方法;

html部分:

css部分,方法一:使用float


方法二:使用了“display: inline-block;”這個屬性后元素之間會產生間隙,在父元素中設置一個“font-size:0”;可以消除掉間隙。



方法三:同上使用了“display: inline-block;”產生了間隙,也可以設置margin來去除掉,但是不同的瀏覽器之間設置的margin可能會有所不同,所以不建議使用這種方法。

?


??????

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,796評論 1 92
  • ?前端面試題匯總 一、HTML和CSS 21 你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什么? ...
    Simon_s閱讀 2,228評論 0 8
  • 一 外部式css樣式 (也可稱為外聯式)就是把css代碼寫一個單獨的外部文件中,這個css樣式文件以“.css...
    KunMitnic閱讀 962評論 0 1
  • 轉載請聲明 原文鏈接地址 關注公眾號獲取更多資訊 第一部分 HTML 第一章 職業規劃和前景 職業方向規劃定位...
    前端進階之旅閱讀 16,621評論 32 459
  • 別把自己擠在回憶里不肯出來,放過自己,是對過去真正的救贖。我們走的路上都是向前的,沒有回頭的可能。 2017年,提...
    一十二一十三閱讀 243評論 0 0