1. 首页
  2. 问答
  3. 如何解决此布局？

如何解决此布局？

2012-11-05 103 views
-1

我得到这个输出如何解决此布局？

enter image description here

如果是这种结果，我想

enter image description here

的HTML是

<div class="fl20">Ans&ouml;kans beroende:</div> 
    <div class="fl20">Fullföljd</div> 
    <div class="fl10">&nbsp;</div> 
    <div class="fl1">&nbsp;</div> 
    <div class="fl20"></div> 
    <div class="clear"></div> 


    <div class="fl1">&nbsp;</div> 
     <div class="fr10 smallg">F&ouml;rnamn Efternamn,<br>handl&auml;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;}​

你能帮我吗？

来源

2012-11-05 Niklas Rosencrantz

+3

是通过表不是选项？ – specialscope

+0

因为您正在显示列表数据，所以HTML表格将是更好的选择... – Nightfirecat

+0

我想将文本移动5厘米。我不想从头开始完全重做整个页面。我没有创建这个页面。 –

回答

1

获取顶部2个大块的两个块元素。你可以使用下面的css。

.blockelement{ 
    display:block; 
    overflow:auto; 
}

对于底部3列创建3浮动：左的div来创建3列，并再次使用blockelement添加 行到每个列。你已经使用了waay太复杂的代码。 我认为桌子会让它简单得多。

来源

2012-11-05 06:48:03 specialscope

+0

我完全不理解。 “前2大”​​？我不想从头开始制作桌面，我想解决这个问题。 –

+1

你可以在jsfiddle中分享它吗？你给的CSS是完全混乱或不完整的。看看这个。 http://jsfiddle.net/harendra/awk7H/ – specialscope

+0

谢谢你的帮助，我给你的答案+1。我可以解决的方法是添加一些div，然后文本得到更正确的对齐。当试图用表格来做时，我只是最终把页面捣毁了，现在至少我已经有了一些可以接受的东西。 –

0

使用此代码与新的结构

<style> 
.data{width:800px; background:#eeefdf;} 
.data div.hed{ font-size:18px; font-weight:bold; height:40px; border-bottom: #CCC 1px solid; padding:7px;} 
.data div.group{font-weight:800px; clear:both; padding:7px;} 
.group div.line{width:250px; margin-right:10px; float:left;} 
</style>

和HTML

<div class="data"> 
<div class="hed">Grunduppgiffter</div> 
<div class="group"> 
    <div class=" line"><strong>ingv</strong></div> 
    <div class=" line"><strong>Ans&ouml;kans beroende</strong></div> 
    <div class=" line"><strong>Fullföljd</strong> 
    </div> 
    <div style="clear:both;"></div> 
</div> 

<div class="group"> 
    <div class=" line">&nbsp;</div> 
    <div class=" line">Fullföljd från:</div> 
    <div class=" line">: 12313</div> 
    <div style="clear:both;"></div> 
</div> 

<div class="group"> 
    <div class=" line">&nbsp;</div> 
    <div class=" line">WO-nummer:</div> 
    <div class=" line">: 147754</div> 
    <div style="clear:both;"></div> 
</div> 

<div class="group"> 
    <div class=" line">&nbsp;</div> 
    <div class=" line">Internationell ingivningsdag:</div> 
    <div class=" line">: 5586764545</div> 
    <div style="clear:both;"></div> 
</div> 


</div>

，让我看看你有什么结果

有一个愉快的一天

来源

2014-07-03 09:12:35 fahd4007

相关问题

 相关问题