最近在改新UI,用到div布局。要实现如题的要求。
实现点:float:left;width:100%; 顺序(有float的要先渲染);
<div style="width:100%;border:1px solid red"><div>
<div style="width:20px;float:right;border:1px solid blue">sdsd</div>
实现:1.直接将style写在div里
HTML
<div style="border:1px solid black;clear:both;">
<div style="width:20px;float:right;border:1px solid blue;">sdsd</div>
<div style="width:100%;border:1px solid red;">a<div>
<div>
注意:float的div是写在前的,如果写在自动填充的div后面,则效果没有
2.写css
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<style>
.right
{
width:20px;
float:right;
border:1px solid black;
clear:both;
}
.left
{
width:100%;
border:1px solid red;
margin-right:20px;
clear:both:
}
</style>
<BODY>
<div style="border:1px solid black;clear:both;">
<div class="right">sdsd</div>
<div class="left">a<div>
<div>
</BODY>
</HTML>