<div class="box">
<span class="rule1">浮动元素1</span>
<span class="rule2">浮动元素2</span>
</div>
.box {
background: #00ff90;
padding: 10px;
width: 500px;
height: 150px;
}
.rule1 {
float: left;
margin: 0;
padding: 10px;
background: #ff6a00;
width: 300px;
text-align: center;
}
.rule2 {
float: right;
margin: 0;
padding: 10px;
background: #ff6a00;
width: 300px;
text-align: center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.