我得到这个输出如何解决此布局?
如果是这种结果,我想
的HTML是
<div class="fl20">Ansökans beroende:</div>
<div class="fl20">Fullföljd</div>
<div class="fl10"> </div>
<div class="fl1"> </div>
<div class="fl20"></div>
<div class="clear"></div>
<div class="fl1"> </div>
<div class="fr10 smallg">Förnamn Efternamn,<br>handläggarkod<br><br></div>
<div class="fl20"></div>
<div id="ff" class="fl20">
Fullföljd från:</div>
<div class="fl20">
<strong>1201191-2 </strong>
</div> <div class="fl20"></div>
<div id="wo" class="fl20">
WO-nummer:</div>
<div class="fl20">
<strong>432432 </strong>
</div>
<div class="fl20"></div>
<div class="clear"></div>
<div id="datum" class="fl20">
Internationell ingivningsdag:</div>
<div class="fl20">
<strong>2012-11-11</strong>
</div>
而CSS是
* {font-family:arial;}
.avnamn{
color: #90002b;
font-size: 140%;
display: inline;
vertical-align: 3%;
margin-left: 1%;
}
.b{border:1px solid #000;}
.readonly{background-color: #CCC;}
.Webdings{
font-family: Webdings;
}
ul{margin-top: 0px}
.mt3{margin-top:-3px;}
.mt5p{margin-top:5px;}
.fontS80 {font-size: 80%;}
a:link{color:#000; text-decoration:none; }
a:visited{color:#000; text-decoration:none; }
a:hover{color:#000; text-decoration:none; }
a:active{color:#000; text-decoration:none; }
.fontS75 {font-size: 75%;}
.link{color: #003366;
text-decoration: underline;
cursor: pointer;
font-weight: bold;}
.link_sm{color: #003366;
text-decoration: underline;
cursor: pointer;}
.link_sm{font-size: 70%;cursor: pointer;}
.small{font-size: 75%;}
.smallg{font-size: 75%;
color: #555;}
.ssmall{
font-size: 65%;
font-weight: bold;
color: #555;
}
.small60{font-size: 60%;}
.small50{
font-size: 50%;
color: #333;
}
.smallb{font-size: 85%;}
table{display:inline;}
h1{font-size: 130%;display:inline;}
h2{font-size: 100%;display:inline;}
h3{
font-size: 80%;
display:inline;
font-family: "Arial Unicode MS", Arial, Helvetica, sans-serif;
}
h4{font-size: 70%;display:inline;}
h5{
font-size: 80%;
display:inline;
font-family: "Arial Unicode MS", Arial, Helvetica, sans-serif;
}
.hthin{
font-size: 125%;
}
.th {text-align: left;}
td, th{font-size: 75%;
vertical-align: text-top;}
.td_link{cursor: pointer;}
.td40{height:40px;}
.td60{height:60px;}
.thkant{
border-top: 1px solid #000;
border-bottom: 1px solid #000;
font-size: 70%;
text-align: left;
}
.bb{border-bottom: 1px solid #000;}
.bbV{border-bottom: 1px solid #FFF;}
.TB_nbA {background-color:#CCC;}
.TB_bt, .TB_nb, .TB_db, .TB_bb {background-color:#efefdc;}
.hk {background-color:#d9ddb3;}
.hknot {background-color:#f9faf2;}
/*<!--F8F8F1-->*/
.TB_bt{border-top: 1px solid #FFF;}
.TB_bt5{border-top: 5px solid #FFF;}
.TB_bb{border-bottom: 1px solid #999;}
.TB_bb2{border-bottom: 2px solid #c1c1b3;}
.TB_db{border-bottom: 1px solid #000; border-top: 1px solid #000;}
.TB_tb{border-top: 2px solid #efefdc;}
.TB_bo{border: 2px solid #efefdc;}
.TB_bo_hk{border-top: 1px solid #efefdc;}
.TB_bo2{border: 1px solid #efefdc;}
.TB_bo2B{
border-top: 2px solid #c1c1b3;
border-left: 3px solid #efefdc;
border-right: 3px solid #efefdc;
border-bottom: 2px solid #c1c1b3;
}
.TD_bo{
border-right: 1px solid #c1c1b3;
width: 9%;
font-size: 70%;
text-align: center;
}
.TD_bo2{
border-right: 0;
width: 9%;
font-size: 70%;
text-align: center;
}
.ytb{
border-left:3px solid #efefdc;
border-right:3px solid #efefdc;
}
.datum {
font-size: 70%;
padding-right: 5px;
vertical-align: text-top;}
.sub {background:#EAEAEA;}
.sub_meny, .sub_meny_r, .sub_meny_active, .sub_meny_sm{
font-size: 70%;
padding-left: 20px;
padding-right: 20px;
vertical-align: text-top;}
.sub_meny_sm {
font-size: 60%;
vertical-align: middle;
padding-left: 10px;
padding-right: 10px;
}
.sub_meny_search{
position: absolute;
right: 265px;
font-size: 70%;
vertical-align: text-top;
}
.sub_meny_r{
float:right;
font-size: 70%;
padding-left: 8px;
padding-right: 8px;}
.sub_meny_rm{margin-top:4px;}
.sub_meny_active{font-weight: bold;}
.flikkant1 {
background-image: url(../images/fl1k.jpg);
background-position: center;
z-index: -1;}
.inl_namn{
font-weight: bold;
font-size: 70%;
color: Black;
text-decoration: none;}
.th{text-align: left;}
.tr{text-align: right;}
.g1{
background-color: #FFF;
line-height: 20px;
}
.g2{
background-color: #EEE;
line-height: 20px;
}
.g3{
background-color: #DCDCDC;
line-height: 20px;
font-weight: bold;
font-size: 100%;
}
.g4{
background-color: #CCC;
line-height: 20px;
}
.popuphandlaggare{
border-color: #000;
border-style: groove;
border-width: 2px;
padding: 0px;
background-color: #FFF;
font-size: 70%;
position: absolute;
top: 900px;
}
.popupN{
background-color: #F0F0E3;
color: #000;
width: 100%;
display: inline;
font-weight: bold;
height: auto;
padding: 2px;
border-bottom: 1px solid #000;
}
.pin{padding: 6px;}
.fl10, .fl20, .fl30, .fl40, .fl50, .fl60, .fl70, .fl80, .fl90, .fl100 {
padding-bottom:4px;color: #000000;
}
.over{
background-color: #EFEFDC;
line-height: 20px;
}
.half{
line-height:50%;
}
.quarter{
line-height:25%;
}
.lh10{
line-height:10%;
}
.checkmargin {margin-right: 25px;}
.checkmarginL {margin-left: 25px;}
.pusher {padding-left: 15px;}
.pusherR {margin-right: 40px;}
.rand3{background-color: #FFF; line-height: 3px;}
.rand1{background-color: #FFF; line-height: 1px;}
.whiteborder { color: #ffffff; border: 4px solid #ffffff; padding: 10px; margin: 10px; }
#details { width: 700px; color: #ffffff; }
.column1 { color: #000000; margin: 0; padding: 0; width: 600px; border:0; float: left; }
.column2 { color: #000000;margin: 0; padding: 0; border:0; width: 80px; float: right; }
.f200 {
color: #000000;
}
.f210 {
color: #000000;float: left;
}
.f220 {
width: 400px;
}
.f1450 {
width: 600px;
float:left;
}
.f1550 {
width: 150px;
float:left;
padding:15px;
}
.paddedcell {
padding:15px;
}
.b2{border:2px solid #efefdc;}
.inp_sel{width: 80%;}
.fl21{float:left; padding:5px; margin:5px; width:150px;} .fl455{float:left; padding:5px; margin:5px; width:120px;}
.form-bg {
background: #eeefdf;
width:1000px;
overflow:hidden;
}
.form-bg2 {
background: #eeefdf;
width:100%;
overflow:hidden;
}
.data-bar {
border-bottom:1px solid #fbfbf7;
display:inline-block;
padding:10px 10px;
}
.left {
float:left;
width:200px;
}
.discount {
float:right;
width:500px;
}
.discounts {
width:900px;
}
.right {
float:right;
width:700px;
}
.yta20 {
background: #eeefdf;
width:1100px;
}
.yta2 {
width:1100px;
}
.data-box {
width:650px;
height:100px;
border:1px solid #cbcbcb;
}
#table td {
margin:120px;
}
#personName { float:left; width:300px; } #otherDetails { float:right; width:450px; }
.th_rad_sort {border-bottom: 2px solid #000000; text-decoration: none;}
a img { border: 0; outline:0;}
.f { float: right; color: white; }
.handlaggare { width: 1000px; }
div.data-box-nat{
margin-bottom: 10px;
padding: 2px;
border: 2px solid gray;
width: 600px;
}
div.data-box-pct{
margin-bottom: 10px;
border: 2px solid gray;
width: 600px;
}
.popup{
border-color: #000;
border-style: groove;
border-width: 2px;
padding: 0px;
background-color: #FFF;
font-size: 75%;
}
.horizontal-gradient {
background: #1a2adb; /* Old browsers */
background: -moz-linear-gradient(left, #1a2adb 0%, #a1e6ed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1a2adb), color-stop(100%,#a1e6ed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #1a2adb 0%,#a1e6ed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #1a2adb 0%,#a1e6ed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #1a2adb 0%,#a1e6ed 100%); /* IE10+ */
background: linear-gradient(left, #1a2adb 0%,#a1e6ed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1a2adb', endColorstr='#a1e6ed',GradientType=1); /* IE6-9 */
color: white;
width: 1055px;
}
.horizontal-gradient-hlsok {
background: #1a2adb; /* Old browsers */
background: -moz-linear-gradient(left, #1a2adb 0%, #a1e6ed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1a2adb), color-stop(100%,#a1e6ed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #1a2adb 0%,#a1e6ed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #1a2adb 0%,#a1e6ed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #1a2adb 0%,#a1e6ed 100%); /* IE10+ */
background: linear-gradient(left, #1a2adb 0%,#a1e6ed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1a2adb', endColorstr='#a1e6ed',GradientType=1); /* IE6-9 */
color: white;
width: 785px;
}
#topBar {width:100%; background-color:#EFEFDC; display:inline-block;}
#topBar h2 {float:left}
#close {position:relative; float:right;}​
你能帮我吗?
是通过表不是选项? – specialscope
因为您正在显示列表数据,所以HTML表格将是更好的选择... – Nightfirecat
我想将文本移动5厘米。我不想从头开始完全重做整个页面。我没有创建这个页面。 –