如何使DIV等同于colspan？
我想实现这个观点
但是我有一个问题：“Munstycke ......”的文本不应该在左边这个行，它应该像规范中那样：
我实现首先提到的观点的代码是：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link href="css_js/styles.css" rel="stylesheet" type="text/css">
<link href="css_js/positions.css" rel="stylesheet" type="text/css">
<link href="css_js/floats.css" rel="stylesheet" type="text/css">
<script src="css_js/sorttable.js"></script>
<script language="JavaScript1.2" src="css_js/general_arendeprocess.js"></script>
<script language="JavaScript1.2" type="text/javascript">
function ingVar(x) {
var applicationDependence;
applicationDependence = x;
document.getElementById('ff').style.display='none';
document.getElementById('avd').style.display='none';
document.getElementById('utb').style.display='none';
document.getElementById('oepa').style.display='none';
document.getElementById('aooep').style.display='none';
if (applicationDependence == 'ff'){
document.getElementById('ob').style.display='none';
document.getElementById('ff').style.display='';
}
if (applicationDependence == 'avd'){
document.getElementById('ob').style.display='none';
document.getElementById('avd').style.display='';
}
if (applicationDependence == 'utb'){
document.getElementById('ob').style.display='none';
document.getElementById('utb').style.display='';
}
if (applicationDependence == 'oepa'){
document.getElementById('ob').style.display='none';
document.getElementById('oepa').style.display='';
}
if (applicationDependence == 'aooep'){
document.getElementById('ob').style.display='none';
document.getElementById('aooep').style.display='';
}
if (applicationDependence == 'ob'){
document.getElementById('ob').style.display='';
}
}
</script>
<title>Ingivningsdag - NAT. - Pandora </title>
</head>
<%
final Logger logger = Logger.getLogger("arendeprocess_grunduppgifter.jsp");
ArendeProcessPageController apc = new ArendeProcessPageController(request);
GrunduppgifterPageController pc = new GrunduppgifterPageController(request);
String arendeTyp = apc.getArendeTyp();
boolean showSearch = false;
AnsokanInfo ansokanInfo = apc.getAnsokanInfo();
PersonInfo editPerson = new PersonInfo();
if(ansokanInfo != null && ansokanInfo.hasEditPersonInfo()) {
editPerson = ansokanInfo.getEditPersonInfo();
} else {
editPerson.setFornamn(apc.getNyregPerson().getFornamn());
editPerson.setEfternamn(apc.getNyregPerson().getEfternamn());
editPerson.setForetag(apc.getNyregPerson().getForetag());
//editPerson.setOrgnr(apc.getNyregPerson().getOrgnr());
editPerson.setLandKod(apc.getNyregPerson().getLandKod());
}
if(apc.getLatestAction().equals("Namnsokning") && apc.getLatestActionCommand().equals("search")) {
showSearch = true;
}
%>
<body><form name="actionForm" action="PandoraActionServlet" style="display: inline;" method="post">
<input type="hidden" name="currPage" value="<%=request.getRequestURI()%>" />
<input type="hidden" name="action" value="" />
<input type="hidden" name="actionCommand" value="" />
<input type="hidden" name="actionModifier" value="" />
<input type="hidden" name="actionTarget" value="" />
<input type="hidden" name="destination" value="" />
<input type="hidden" name="currIndex" value="" />
<!--sidinnehåll-->
<div class="form-bg">
<div class="data-bar">
<div class="yta2 TB_nb fontS80 ">
<div class="clear "> </div>
<div class="fr1 "> </div>
<div class="fr5 "><input type="button" value="Historik"></div>
<div class="fl30"><h2>Grunduppgifter</h2></div>
<div class="clear quarter"> </div>
</div>
</div>
<div class="data-bar">
<div class="clear "></div>
<div id="indag" class="yta2 TB_nb fontS80">
<div class="clear half"> </div>
<div class="fl10"><h3>Ingivningsdag</h3></div>
<div class="fl20">Ansökans beroende:</div>
<div class="fl20">Oberoende</div>
<div class="fl10"> </div>
<div class="fl1"> </div>
<div class="fl20"></div>
<div class="clear"></div>
<div id="ob">
<div class="fr10 smallg">Förnamn Efternamn,<br>handläggarkod<br><br></div>
<div class="fl10"></div>
<div id="datum" class="fl20">Datum ingivningsdag:</div>
<div class="fl20">
<strong>2009-01-01</strong>
</div>
<div class="clear"></div>
<div class="data-bar"></div><br>
<div class="fl10"><h3>Sökande</h3></div>
<div class="fl20"><div class="data-box">
<table border="0">
<tr><td>c o Andersson</td><td>Telefon</td><td>0707532637</td></tr>
<tr><td>Angeredsgatan 12 B, 3 tr</td><td>Fax</td><td>7551444</td></tr>
<tr><td>234 56 Angegerdet</td><td>E-post</td><td>0707532637</td></tr>
<tr><td>Sverige</td><td>Referens</td><td></td></tr>
</table>
</div></div>
<div class="clear"></div>
<div class="fl10"><h3>Uppfinnare</h3></div>
<div class="fl20"><div class="data-box">
<table id="table" border="0">
<tr><td>c o Andersson</td><td>Telefon</td><td>0707532637</td></tr>
<tr><td>Angeredsgatan 12 B, 3 tr</td><td>Fax</td><td>7551444</td></tr>
<tr><td>234 56 Angegerdet</td><td>E-post</td><td>0707532637</td></tr>
<tr><td>Sverige</td><td>Referens</td><td></td></tr>
</table>
</div></div>
<div class="clear"></div>
<div class="fl10"><h3>Ombud sökande 1-2</h3></div>
<div class="fl20"><div class="data-box">
<table border="0">
<tr><td>c o Andersson</td><td>Telefon</td><td>0707532637</td></tr>
<tr><td>Angeredsgatan 12 B, 3 tr</td><td>Fax</td><td>7551444</td></tr>
<tr><td>234 56 Angegerdet</td><td>E-post</td><td>0707532637</td></tr>
<tr><td>Sverige</td><td>Referens</td><td></td></tr>
</table>
</div></div>
<div class="clear"></div>
<div class="data-bar"></div><div class="clear"></div><br>
<div class="fl10"><h3>Benämning</h3><br>Uppfinningens benämning:</div>
<div class="fl20">
Munstycke och oftast ett mycket längre krångligt begrepp i en lång lång texststträng längre krångligt begrepp i en lång lång textsträng längre krängligt begrepp i en lång lång textsträng längre krånglig textsträng
</div>
<div class="clear"></div>
<div class="fl10"><h3>Prioriteter</h3></div>
<div class="fl20">
<table border="0">
<tr><td>Prioritet</td><td>Prioritetsdag</td><td>Prio. dok i ärende</td></tr>
<tr><td>DK 0900231-1</td><td>2009-03-21</td><td>0800213-3</td></tr>
<tr><td>EP 123234.3</td><td>2009-02-11</td><td>PCT/SE2002/000231</td></tr>
<tr><td>SE PCT/SE2006/032131</td><td>2006-02-12</td><td></td></tr>
</table>
</div></div>
<div class="clear"></div>
<div class="fl10"><h3>Deposition mikroorganismer</h3></div>
<div class="fl20">
<table border="0">
<tr><td>Depositionsmyndighet</td><td>Depositionsdatum</td><td>Depositionsnummer</td><td>Endast utlämning till expert</td></tr>
<tr><td>Smittskyddsinstitutet</td><td>2009-03-21</td><td>11123</td><td>Nej</td></tr>
</table>
</div>
<div class="clear"></div>
<div class="fl10"><h3>Handläggare</h3></div>
<div class="fl20">
Markus Stålö, MSTÅ
</div>
<div class="clear"></div>
<div class="fl10"><h3>Resultat</h3></div>
<div class="fl20">
<table border="0">
<tr><td>c o Andersson</td><td>Telefon</td><td>0707532637</td></tr>
<tr><td>Angeredsgatan 12 B, 3 tr</td><td>Fax</td><td>7551444</td></tr>
<tr><td>234 56 Angegerdet</td><td>E-post</td><td>0707532637</td></tr>
<tr><td>Sverige</td><td>Referens</td><td></td></tr>
</table>
</div>
</div><!-- indag -->
</div>
</div>
</div>
</form>
</body>
</html>
* {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;
}
.labb{F0F0E3; c1c1b3 }
.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_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;
}
.popup{
border-color: #000;
border-style: groove;
border-width: 2px;
padding: 0px;
background-color: #FFF;
font-size: 70%;
}
.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: 580; color: #ffffff; }
.column1 { color: #000000; margin: 0; padding: 0; width: 500px; 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;
}
body
{
background-color:#eeefdf;
}
.form-bg {
background: #eeefdf;
width:1000px;
overflow:hidden;
}
.data-bar {
border-bottom:1px solid #fbfbf7;
display:inline-block;
padding:10px 10px;
}
.left {
float:left;
width:200px;
}
.right {
float:right;
width:700px;
}
.data-box {
width:650px;
height:100px;
border:1px solid #cbcbcb;
}
#table td {
margin:120px;
}
你能告诉我应该怎么做吗？任何其他建议我如何使我的结果看起来更像规范？
谢谢
3 个答案:
答案 0 :(得分：2)
colspan是表格功能。它不适用于divs或除table之外的任何其他元素。
避免自己寻找一个人的麻烦。哎呀，即使你找到一个，它也会非常 buggy 而且只是不值得被称为解决方案。
答案 1 :(得分：1)
你可以用这样的浮动元素解决它：
<div style="float:left;width:200px">
<span>Name</span>
</div>
<div style="float:left">
<ul style="clear:both">
<li style="list-style:none">
<p style="float:left;width:200px;">c o Andersson</p>
<p style="float:left;width:200px;"> Telefon </p>
<p style="float:left;width:200px;"> 123456 </p>
</li>
<li style="clear:both; list-style:none">
<p style="float:left;width:200px;">Angeredsgatan</p>
<p style="float:left;width:200px;">Fax</p>
<p style="float:left;width:200px;">7551444</p>
</li>
</ul>
</div>
<div style="clear:both;float:left;width:200px">
<span>name</span>
</div>
<div style="float:left;">
<span>Munstycke och oftast ett mycket längre krångligt begrepp i en lång lång texststträng längre krångligt begrepp i en lång lång textsträng längre krängligt begrepp i en lång lång textsträng längre krånglig textsträng
</span>
</div>
答案 2 :(得分：1)
对于相当于colspan浮点数的内联元素，可以模拟表格中的单元格。
为了使其工作，您需要指定浮动的每个块元素的宽度，以使它们的组合宽度不大于容器元素的宽度。
例如在你的情况下，我会做
.f110 { width:20%; float: left; }
.f120 { width:80%; float:left; }
.clear { clear:both; }
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？