DIV 两个显示在同一行并且有边框有边距

2019年7月24日

relative样式

a测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1

b测试2

<!DOCTYPE HTML><html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>relative样式</title> <style type="text/css"> .class {
padding:0px 50px; }
.div1 { width: 50%; height: 400px; border: 1px red solid; box-sizing: border-box; float: left; text-align: center; line-height: 400px; white-space:nowrap; word-wrap: break-word; word-break:break-all; text-overflow:ellipsis; margin-left:-15px; overflow:hidden; margin-bottom: 10px; color: red; }
.div2 { width: 50%; height: 400px; border: 1px red solid; box-sizing: border-box; float: right; text-align: center; line-height: 400px; white-space:nowrap; margin-bottom: 10px; word-wrap: break-word; word-break:break-all; text-overflow:ellipsis; margin-right:-15px; overflow:hidden; color: red; } .cb{ clear: both; } </style></head>
<body> <div class="class"> <div class="div1">a测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1</div> <div class="div2">b测试2</div><div class="cb"></div> <div class="div1"> a测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1 </div> <div class="div2">b测试2</div><div class="cb"></div>
<div class="div1"> a测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1 </div> <div class="div2">b测试2</div> <div class="cb"></div> </div></body>
</html>

php

leo的个人博客