2 votes

909 Niklas avatar

Comment faire l'équivalent DIV de colspan ?

Demandé el 23 de Mars, 2012
Quand la question a-t-elle été
8005 affichage
Nombre de visites la question a
3 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

Je veux mettre en œuvre cette vue enter image description here

Mais j'ai une question : Le texte qui dit "Munstycke..." ne devrait pas avoir le saut de ligne aussi loin à gauche, il devrait être comme dans la spécification : enter image description here

Mon code qui permet d'obtenir la vue mentionnée en premier lieu est le suivant :

<!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&aring;ll-->
<div class="form-bg">
<div class="data-bar">
<div class="yta2  TB_nb fontS80 ">
    <div class="clear ">&nbsp;</div>
    <div class="fr1 ">&nbsp;</div>
    <div class="fr5 "><input type="button" value="Historik"></div>
    <div class="fl30"><h2>Grunduppgifter</h2></div>
    <div class="clear quarter">&nbsp;</div>
</div>
</div>
<div class="data-bar">
<div class="clear "></div>

<div id="indag" class="yta2   TB_nb fontS80">
    <div class="clear half">&nbsp;</div>
    <div class="fl10"><h3>Ingivningsdag</h3></div>

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

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

Pouvez-vous me dire comment je dois m'y prendre ? Avez-vous d'autres suggestions pour que mon résultat ressemble davantage à la spécification ?

Gracias

Demandé el 23 de Mars, 2012 par 909 Niklas

Réponses

Trop de publicités?

2voto

Starx avatar
Starx Points 38727

colspan es un fonction de table . Il n'est pas disponible pour divs ou tout autre élément sauf table .

Évitez de vous donner la peine d'en chercher un. Parce que, même si vous en trouvez un, il sera très difficile à trouver. buggy et simplement pas digne pour être appelé une solution.

Répondu el 23 de Mars, 2012 par Starx (38727 Points )

2voto

Jules avatar
Jules Points 389

Vous pouvez le résoudre avec des éléments flottants comme celui-ci :

<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>
Répondu el 23 de Mars, 2012 par Jules (389 Points )

1voto

Codrin Eugeniu avatar
Codrin Eugeniu Points 1107

Pour un équivalent de colspan faites flotter les éléments que vous voulez en ligne, pour imiter les cellules d'un tableau.

Pour que cela fonctionne, vous devez spécifier la largeur de chaque élément de bloc que vous faites flotter, afin que leur largeur combinée ne soit pas supérieure à celle de l'élément conteneur.

Par exemple, dans votre cas, je ferais

.f110 { width:20%; float: left; }
.f120 { width:80%; float:left; }
.clear { clear:both; }
Répondu el 23 de Mars, 2012 par Codrin Eugeniu (1107 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X