Question

我想实现这个观点： enter image description here

我可以用表格来做，但是当我用DIV做它时它就会崩溃。我确实喜欢这个：

    <div class="fl25"><h3>S&ouml;kande och uppfinnare</h3></div>
        <div class="clear">&nbsp;</div>
        <div class="fl20">Registrera:</div>
        <div class="fl15"><input type="checkbox"    name="<%= PandoraFieldConstants.FIELD_ADD_SOKANDE %>">S&ouml;kande</div>
        <div class="fl15"><input type="checkbox"    <% if (ansokanInfo.getUppfinnareList().contains(editPerson)) { %> 
    checked="checked""
    <% } %> name="<%= PandoraFieldConstants.FIELD_ADD_UPPFINNARE %>">Uppfinnare</div>

        <div class="clear lh10"></div>
        <div class="clear"></div>
<div class="example1">
    <div class="example_column1"><fieldset class="whiteborder">
         <legend><i>Fysisk person</i></legend><br> 
        <div class="fl20">F&ouml;rnamn:</div>
        <div class="fl20"><input type="text" size="20" value="<%=editPerson.getFornamn() %>" name="<%= PandoraFieldConstants.FIELD_FORNAMN %>"></div>       
        <div class="fl20">Efternamn:</div>
        <div class="fl20"><input type="text" size="20" value="<%=editPerson.getEfternamn() %>" name="<%= PandoraFieldConstants.FIELD_EFTERNAMN %>"></div>
        </fieldset></div>
    <div class="example_column2">
        <div class="fl20">S&ouml;k person/f&ouml;retag<input type="button" value="S&ouml;k" onClick="getElementById('popupSokNamn').style.display=''">
        </div>
    </div>

使用CSS

.whiteborder {     color: #ffffff;      border: 3px solid #ffffff;      padding: 10px;      margin: 10px; }

div.example1
{
width: 500;
color: #ffffff;
}
div.example1 div
{
float: left;
height: 100px;
}
div.example1 div.example_column1
{
width: 450px;
}
div.example1 div.example_column2
{
width: 50px;
}

现在这不起作用，虽然看起来是正确的事情。现在我迷失了想法，其中一种方式是实现视图，这种视图很容易用表格完成，而且几乎不可能用DIV s

您能告诉我如何查看视图吗？之前我问过这个问题，但范围不足（How to make a white square around my form fields?）

我尽了最大的努力，似乎无法在右侧放置带有“Sökperson/företag”的按钮，表格的标签也不能正确对齐：

enter image description here

我使用的代码是

        <div class="fl25"><h3>S&ouml;kande och uppfinnare</h3></div>
        <div class="clear">&nbsp;</div>
        <div class="fl20">Registrera:</div>
        <div class="fl15"><input type="checkbox"    name="<%= PandoraFieldConstants.FIELD_ADD_SOKANDE %>">S&ouml;kande</div>
        <div class="fl15"><input type="checkbox"    <% if (ansokanInfo.getUppfinnareList().contains(editPerson)) { %> 
    checked="checked""
    <% } %> name="<%= PandoraFieldConstants.FIELD_ADD_UPPFINNARE %>">Uppfinnare</div>

<div class="fl20"><input type="button" value="S&ouml;k person/f&ouml;retag"></div>
        <div class="clear lh10"></div>
        <div class="clear"></div>
        <div class="fl20"></div>&nbsp;
                <fieldset class="whiteborder"><legend><i>Fysisk person</i></legend> 
    <br>        
        <div class="fl20">F&ouml;rnamn::</div>
        <div class="fl20"><input type="text" size="60" value="<%=editPerson.getFornamn() %>" name="<%= PandoraFieldConstants.FIELD_FORNAMN %>"></div>
        <div class="clear"></div>
        <div class="fl20">Efternamn:</div>
        <div class="fl20"><input type="text" size="60" value="<%=editPerson.getEfternamn() %>" name="<%= PandoraFieldConstants.FIELD_EFTERNAMN %>"></div>
        <div class="clear">&nbsp;</div>
        </fieldset>

更新

答案对我不起作用。我几乎可以实现我想要的但是它不完整： enter image description here 呈现页面的所有代码都是

<!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>






<body><form name="actionForm" action="PandoraActionServlet" style="display: inline;" method="post">
    <input type="hidden" name="currPage" value="/PandoraArendeWeb/20120306_grunduppgifter.jsp" />
    <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="" />
    <div id="top">
        <div id="av_logga">
            <br>
            <span class="small60">Nummer: <input type="text" size="40"> <input type="button" value="S&ouml;k"></span>
        </div>
        <img src="../images/prvision.gif" alt="" width="109" height="30" border="0" style="margin: 4px 13px;">
        <div class="avnamn">
            Pandora
        </div>
        <div  id="flikkant" class="flikkant1">
            <span class="sub_meny_r"><img src="../images/avdelare.gif" alt="" width="2" height="20" border="0" style="display: inline;"></span>
            <span class="sub_meny_r sub_meny_rm">Logga ut</span>
            <span class="sub_meny_r"><img src="../images/avdelare.gif" alt="" width="2" height="20" border="0" style="display: inline;"></span>
            <span class="sub_meny_r sub_meny_rm">?</span>
            <span class="sub_meny_r"><img src="../images/avdelare.gif" alt="" width="2" height="20" border="0" style="display: inline;"></span>
            <span class="sub_meny_r sub_meny_rm">S&ouml;k</span>
            <span class="sub_meny_r"><img src="../images/avdelare.gif" alt="" width="2" height="20" border="0" style="display: inline;"></span> 
            <img src="../images/avdelare.gif" alt="" width="2" height="20" border="0" style="display: inline;">
            <a href="ankomstregistrering.html"><span class="sub_meny">Ankomst</span></a>
            <img src="../images/avdelare.gif" alt="" width="2" height="20" border="0" style="display: inline;">
            <a href="formalialista.html"><span class="sub_meny_active">Formell</span></a>
            <img src="../images/avdelare.gif" alt="" width="2" height="20" border="0" style="display: inline;">
            <a href="formalialista.html"><span class="sub_meny">Juridisk</span></a>
            <img src="../images/avdelare.gif" alt="" width="2" height="20" border="0" style="display: inline;">
            <span class="sub_meny">Teknisk</span>
            <img src="../images/avdelare.gif" alt="" width="2" height="20" border="0" style="display: inline;">
            <span class="sub_meny">Publicering</span>
            <img src="../images/avdelare.gif" alt="" width="2" height="20" border="0" style="display: inline;">
            <span class="sub_meny"> Kundregister</span>
            <img src="../images/avdelare.gif" alt="" width="2" height="20" border="0" style="display: inline;">
            <span class="sub_meny">Expediering</span>
            <img src="../images/avdelare.gif" alt="" width="2" height="20" border="0" style="display: inline;">
        </div><!-- filkkant -->
</div><!-- top -->


<!-- F-handl&auml;ggning -->
<div id="sub" class="sub">
    <span style="float:right">
         <span class="sub_meny_sm">Senast &ouml;ppnade:</span> 
         <span class="sub_meny_sm link">1234567-9</span>
          <span class="sub_meny_sm link">1234567-9</span>
         <span class="sub_meny_sm link">S&ouml;kresultat</span>
    </span>
    <a href=formellkontroll.html><span class="sub_meny_active " onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'" >Formell kontroll</span> </a>
     <a href=fordelalista.html><span class="sub_meny " onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">F&ouml;rdelning</span> </a>
    <a href=klassningslista.html><span class="sub_meny " onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">Klassning</span> </a>
</div><!-- sub -->

<div id="yta">
<p>&nbsp;</p>

<table width="100%" border="0" cellspacing="0" cellpadding="4" align="center" class="TB_bo" style="border-bottom:0;">
<tr>
    <td class="TD_bo hknot"> <a href=oversikt.html><span onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">&Ouml;versikt</span></a></td>
        <td class="TD_bo hk TB_bo_hk sub_meny_active">Grunduppgifter</td>
    <td class="TD_bo hknot"> <a href=checklista.html><span  onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">Checklista</span> </a></td>
    <td class="TD_bo hknot"> <a href=klass.html><span  onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">Klass</span> </a></td>
    <td class="TD_bo hknot"> <a href=its.html><span onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">ITS</span> </a></td>
    <td class="TD_bo hknot"> <a href=frister><span  onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">Status</span> </a></td>
    <td class="TD_bo hknot"> <a href=handlingar><span  onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">Handlingar</span> </a></td>
    <td class="TD_bo hknot"> <a href=frister><span  onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">Frister</span> </a></td>
    <td class="TD_bo2 hknot"> <a href=rapporter><span  onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">Rapporter</span> </a></td>
</tr>
</table>

<table width="100%" border="0" cellspacing="0" cellpadding="4" align="center" class="TB_bo2B">
    <tr>
        <td colspan="1" class="pusher td40"><h1>Svensk patentans&ouml;kan</h1></td>
        <td rowspan="2" width="40%">&nbsp;</td>
        <td colspan="3"><span class="link">Visa akt</span></td>
    </tr>
    <tr>
        <td class="pusher"><h1>SE 9304251-3</h1><h2 class="pusher">Inte offentlig</h2></td>
        <td class="link ssmall">Betalningar</td>
        <td class="link ssmall">Dagbok</td>
        <td class="link ssmall">Noteringar</td>
    </tr>
</table>



<!--sidinneh&aring;ll-->

<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 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"><select name="ansokanBeroende" onchange="ingVar(this.value);">
    <option value="ob" SELECTED>Oberoende ans&ouml;kan</option>
    <option value="ff">Fullf&ouml;ljd</option>
    <option value="avd">Avdelad</option>
    <option value="utb">Utbruten</option>
    <option value="oepa">Omvandlad EP-ans&ouml;kan</option>
    <option value="aooep">Avdelad och omvandlad EP-ans&ouml;kan</option>
    </select></div>
    <div class="fl10">&nbsp;</div>
    <div class="fl1">&nbsp;</div>
    <div class="fl20"><input type="checkbox" value="">Ingivningsdag kan inte tilldelas</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"><input type="text" name="ingivningsdag" 
    id="ingivningsdag" value="">&nbsp;<img src="images/cal.gif" alt="" width="16" height="15" border="0" onclick="javascript:openCalWin('620','300','ingivningsdag')"></div>

    </div>

    <div id="ff" style="display: none;">
        <div class="fr10 smallg">F&ouml;rnamn Efternamn,<br>handl&auml;ggarkod</div>
        <div class="fl10"></div>
        <div class="fl20">Fullf&ouml;ljd fr&aring;n:</div>
        <div class="fl20"><input type="text"></div>
        <div class="clear"></div>
        <div class="fl10"></div>
        <div class="fl20">WO-nummer:</div>
        <div class="fl20"><input type="text"></div>
        <div class="clear"></div>
        <div class="fl10"></div>
        <div class="fl20">Internationell ingivningsdag:</div>
        <div class="fl20"><input type="text">&nbsp;<img src="../images/minikal.jpg" alt="" width="16" height="15" border="0"></div>
    </div>

    <div id="avd" style="display: none;">
        <div class="fr10 smallg">F&ouml;rnamn Efternamn,<br>handl&auml;ggarkod</div>
        <div class="fl10"></div>
        <div class="fl20">Avdelad fr&aring;n:</div>
        <div class="fl20"><input type="text"><input type="button" value="S&ouml;k"></div>
        <div class="clear"></div>
        <div class="fl10"></div>
        <div id="datum" class="fl20">Datum ingivningsdag:</div>
        <div class="fl20"><input type="text">&nbsp;<img src="../images/minikal.jpg" alt="" width="16" height="15" border="0"></div>
    </div>

    <div id="utb" style="display: none;">
        <div class="fr10 smallg">F&ouml;rnamn Efternamn,<br>handl&auml;ggarkod</div>
        <div class="fl10"></div>
        <div class="fl20">Utbruten fr&aring;n:</div>
        <div class="fl20"><input type="text"><input type="button" value="S&ouml;k"></div>
        <div class="clear"></div>
        <div class="fl10"></div>
        <div id="datum" class="fl20">Datum ingivningsdag:</div>
        <div class="fl20"><input type="text">&nbsp;<img src="../images/minikal.jpg" alt="" width="16" height="15" border="0"></div>
    </div>

    <div id="oepa" style="display: none;">
        <div class="fr10 smallg">F&ouml;rnamn Efternamn,<br>handl&auml;ggarkod</div>
        <div class="fl10"></div>
        <div class="fl20">EP- ans&ouml;kningsnummer:</div>
        <div class="fl20"><input type="text"><input type="button" value="S&ouml;k"></div>
        <div class="clear"></div>
        <div class="fl10"></div>
        <div id="datum" class="fl20">Ankomstdatum (EP-ans&ouml;kan)<br>eller ingivningsdag  (EP-ans&ouml;kan):</div>
        <div class="fl20 mt5p"><input type="text">&nbsp;<img src="../images/minikal.jpg" alt="" width="16" height="15" border="0"></div>
    </div>

    <div id="aooep" style="display: none;">
        <div class="fr10 smallg">F&ouml;rnamn Efternamn,<br>handl&auml;ggarkod</div>
        <div class="fl10"></div>
        <div class="fl20">Avdelad fr&aring;n:</div>
        <div class="fl20"><input type="text"><input type="button" value="S&ouml;k"></div>
        <div class="clear"></div>
        <div class="fl10"></div>
        <div class="fl20">EP- ans&ouml;kningsnummer:</div>
        <div class="fl20"><input type="text"><input type="button" value="S&ouml;k"></div>
        <div class="clear"></div>
        <div class="fl10"></div>
        <div id="datum" class="fl20">Ankomstdatum (EP-ans&ouml;kan)<br>eller ingivningsdag  (EP-ans&ouml;kan):</div>
        <div class="fl20 mt5p"><input type="text">&nbsp;<img src="../images/minikal.jpg" alt="" width="16" height="15" border="0"></div>
    </div>

    <div class="fl10"></div>


    <div class="clear"></div>
</div><!-- indag -->

<div class="clear lh10">&nbsp;</div>

<div id="sokupp" class="yta2   TB_nb fontS80">
    <div class="fl50" id="L-col">
        <div class="clear half">&nbsp;</div>
        <div class="fl25"><h3>S&ouml;kande och uppfinnare</h3></div>
        <div class="clear">&nbsp;</div>
        <div class="fl20">Registrera:</div>
        <div class="fl15"><input type="checkbox"    name="addSokande">S&ouml;kande</div>
        <div class="fl15"><input type="checkbox"     
    checked="checked""
     name="addUppfinnare">Uppfinnare</div>

<div class="fl20"><input type="button" value="S&ouml;k person/f&ouml;retag"></div>
        <div class="clear lh10"></div>
        <div class="clear"></div>
        <div class="fl20"></div>&nbsp;
                <fieldset class="whiteborder"><legend><i>Fysisk person</i></legend> 
    <br>        
        <div class="fl20">F&ouml;rnamn:</div>
        <div class="fl20"><input type="text" size="60" value="Lo 3" name="fornamn"></div>
        <div class="clear"></div>
        <div class="fl20">Efternamn:</div>
        <div class="fl20"><input type="text" size="60" value="Tass 3" name="efternamn"></div>
        <div class="clear">&nbsp;</div>
        </fieldset>
    &nbsp;
        <fieldset class="whiteborder"><legend><i>Juridisk person</i></legend> 

    <br>

        <div class="fl20">F&ouml;retag:</div>
        <div class="fl20"><input type="text" size="60" value="" name="foretag"></div>
        <div class="clear"></div>
        <div class="fl20">Organisationsnummer:</div>
        <div class="fl20"><input type="text" size="60" name="orgnummer"></div>
        <div class="clear">&nbsp;</div>
        </fieldset>
        <div class="fl20">Attention, c/o etc:</div>
        <div class="fl40"><input type="text" size="60" name="att" value=""></div>
        <div class="clear"></div>
        <div class="fl20">Postadress:</div>
        <div class="fl40"><input type="text" size="60" name="postadress" value=""></div>
        <div class="clear"></div>
        <div class="fl20">Postnummer:</div>
        <div class="fl40"><input type="text" size="30" name="postnr" value=""></div>
        <div class="clear"></div>
        <div class="fl20">Postort:</div>
        <div class="fl40"><input type="text" size="30" name="postort" value=""></div>
        <div class="clear"></div>
        <div class="fl20">Land:</div>
        <div class="fl40"><input type="text" size="2" value="SE" name="landkod">&nbsp;
                    <select name="">
                        <option value="1" SELECTED></option>
                        <option value="2"></option>
                        <option value="3"></option>
                        <option value="4"></option>
                        <option value="5">---------------------------------</option>
        </select></div>
        <div class="clear"></div>
        <div class="fl20">Region:</div>
        <div class="fl20"><select name="region">
                        <option value="1" SELECTED></option>
                        <option value="2"></option>
                        <option value="3"></option>
                        <option value="4"></option>
                        <option value="5">-----------------------------------------------</option>
        </select></div>
        <div class="clear"></div>
        <div class="fl20">Tel:</div>
        <div class="fl40"><input type="text" size="40" name="tel"></div>
        <div class="clear"></div>
        <div class="fl20">Fax:</div>
        <div class="fl40"><input type="text" size="40" name="fax"></div>
        <div class="clear"></div>
        <div class="fl20">E-post:</div>
        <div class="fl40"><input type="text" size="60" name="epost"></div>
        <div class="clear"></div>
        <div class="fl20">&nbsp;</div>

        <div class="clear lh10 bb fl80">&nbsp;</div>
        <div class="clear half">&nbsp;</div>
        <div class="fl20">&nbsp;</div>
        <div class="fl20"><input type="button" value="Ta bort"></div>
        <div class="fl20"><input type="button" value="Avbryt">&nbsp;<input type="button" value="L&auml;gg till" onclick="javascript:doSubmitWithTarget('Grunduppgifter','addPerson','')"></div>
    </div>

...

更新

我可以接近但是我不可能做我想要的简单事情，因为图形组件完全随机地向左，向右或向下移动，没有任何原因。我能够实现的观点是：

enter image description here

按照我想要的方式执行此操作的代码是：

<div id="sokupp" class="yta2   TB_nb fontS80">
    <div class="fl50" id="L-col">
        <div class="clear half">&nbsp;</div>
        <div class="fl25"><h3>S&ouml;kande och uppfinnare</h3></div>
        <div class="clear">&nbsp;</div>
        <div class="fl20">Registrera:</div>
        <div class="fl15"><input type="checkbox"    name="addSokande">S&ouml;kande</div>
        <div class="fl15"><input type="checkbox"     
    checked="checked""
     name="addUppfinnare">Uppfinnare</div>

<div class="fl20"><input type="button" value="S&ouml;k person/f&ouml;retag"></div>
        <div class="clear lh10"></div>
        <div class="clear"></div>
        <div class="fl20"></div>

            <div id="example1">     <div class="example_column1"><fieldset class="whiteborder">     
                 <legend><i>Fysisk person</i></legend><br> <table><tr><td>    
                      <div>F&ouml;rnamn:</div>  </td><td>
                      <div><input type="text" size="20" value="Bla" name="blub"></div></td></tr>   
                      <tr><td><div>Efternamn:</div></td><td>
                      <div><input type="text" size="20" value="bli" name="blu"></div></td></tr></table> 
                      </fieldset>     </div>  
                      <div class="example_column2"><div class="fl20">S&ouml;k person/f&ouml;retag<input type="button" value="S&ouml;k" onClick="getElementById('popupSokNamn').style.display=''"></div>      </div> </div>

解决方案

在这种情况下，我终于可以使用此代码使其工作：

HTML

<div id="example1">
<div class="example_column1">
<fieldset class="whiteborder"> <legend><i>Fysisk person</i></legend>
F&ouml;rnamn:<input type="text" size="60" value="Bla" name="blub">
Efternamn:<input type="text" size="60" value="Bla" name="blub"></fieldset>
</div>
<br><br><div class="example_column2">
S&ouml;k person/<br>f&ouml;retag:<br>
<input type="button" value="S&ouml;k" onClick="getElementById('popupSokNamn').style.display=''">
</div> </div>

CSS

.whiteborder {     color: #ffffff;      border: 3px solid #ffffff;      padding: 10px;      margin: 10px; }
#example1 { width: 550; color: #ffffff; }
.example_column1 {     color: #000000; margin: 0;      padding: 0;     width: 470px;     border:0;     float: left; }
.example_column2 {     color: #000000;margin: 0;      padding: 0;     border:0;     width: 80px;     float: right; }

Answer 1

我认为你正在寻找这样的东西：

<html><head><style>
div {background: gray;}
.whiteborder {     color: #ffffff;      border: 3px solid #ffffff;      padding: 10px;      margin: 10px; }
#example1
{
width: 500;
color: #ffffff;
}
.example_column1
{
    margin: 0; 
    padding: 0;
    width: 450px;
    border:0;
    float: left;
}
.example_column2
{
    margin: 0; 
    padding: 0;
    border:0;
    width: 50px;
    float: right;
}

</style></head>
<body>

<div id="example1">
    <div class="example_column1"><fieldset class="whiteborder">
         <legend><i>Fysisk person</i></legend><br> 
        <div>F&ouml;rnamn:</div>
        <div><input type="text" size="20" value="Bla" name="blub"></div>       
        <div>Efternamn:</div>
        <div><input type="text" size="20" value="bli" name="blu"></div>
        </fieldset>
    </div>
     <div class="example_column2">
        <div>S&ouml;k person/f&ouml;retag<input type="button" value="S&ouml;k" onClick="getElementById('popupSokNamn').style.display=''"></div>
     </div>
</div>
</body>

在我的浏览器中看起来与您想要的结果非常相似。我想我应该提几点：

出于调试目的，我想为所有元素添加彩色边框（例如border: 1px solid red）。使用固定宽度布局时，这可能是一个问题：
使用固定像素宽度时，将margin，padding和border明确设置为0可以提供很多帮助。将1像素的边框添加到列的宽度，因此example_column1将是450 + 2 = 452像素宽。这使得example_column2太宽而不适合500像素的整个example1容器，你永远不会让它们并排分开。
一般情况下，遇到此类问题时，请将html删除至重现问题所需的基本最低要求，然后调整css。例如，在这种情况下，我抛弃了所有的fieldset东西，只使用了三个空div（example1，example_column1和example_column2），直到我正确对齐它们。然后我重新添加了字段集，看看整个事情是如何显示的。

Answer 2

检查这个小提琴来解决问题，这样你就可以知道如何实现这个目标 -

小提琴：http://jsfiddle.net/YTQWm/1/

演示：http://jsfiddle.net/YTQWm/1/embedded/result/

在上面的小提琴我专注于白色边框问题和右侧按钮，因为我没有像图像/截图中的整体，所以我试图按照问题提及实现

如何实现这一观点？

更新

更新

解决方案

2 个答案: