尝试让两个div显示在同一行上
Posted unixart
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了尝试让两个div显示在同一行上相关的知识，希望对你有一定的参考价值。
缘由
摸鱼的时候在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>以上是关于尝试让两个div显示在同一行上的主要内容，如果未能解决你的问题，请参考以下文章