緣由
摸魚的時候在V2EX上看到一篇帖子，通過JS代碼實現控制台輸出某網站LOGO，感覺挺有意思的，想將其當網頁元素插入網頁，因此就有了本文。
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>嘗試讓兩個div顯示在同一行上</title>
<style>
.porn {
color: #ffffff;
background: #000000;
padding:5px 10px;
font-size:40px;
border-radius:12px 0 0 12px;
}
.hub {
color: #000000;
background: #FE9A00;
padding:5px 10px;
font-size:40px;
border-radius:0 12px 12px 0;
}
</style>
</head>
<body>
<!-- 一個div內嵌套兩個div,設置這兩個被嵌套的 div 的 style 屬性為"float: left;" -->
<!-- 此方法一般都會有效的，但不建議這么做 -->
<div style="display: inline;">
<div class="porn" style="float: left;">Porn</div>
<div class="hub" style="float: left;">hub</div>
<div style="clear:both;"></div> <!-- 清除float效果 -->
<!-- div 設置 float之后，如果沒有清除 -->
<!-- 則下一個被設置 float 的 div 會根據上一個 float 的 div 的布局進行排版 -->
<!-- 而下一個沒設置 float 屬性的 div 則是根據它的前一個元素進行排版。 -->
</div>
<br />
<!-- 當行內元素處理 -->
<div>
<div class="porn" style="display: inline;">Porn</div>
<div class="hub" style="display: inline;margin-left:-4px;">hub</div>
</div>
<br />
<!-- table大法好！ -->
<table style="margin: 0px;padding: 0px;">
<td style="margin: 0px;padding: 0px;"><div class="porn" style="margin-left: -2px;">Porn</div></td>
<td style="margin: 0px;padding: 0px;"><div class="hub" style="margin-left: -2px;">hub</div></td>
</table>
</body>
</html>