HTML-BROWSER ZOOM导致对齐问题

时间：2013-11-29 03:54:09

标签： html

我有2个div元素，左边是float，右边是div元素..当我缩放浏览器时，所有对齐都会改变......缩放应该是......我们如何缩放图像.... can有人提出解决这个问题的建议

<html>
<style type="text/css">
div.advancedDrugSearchOuterLayout
{
border-style: groove;
border-color: #005ce5;
margin-left:10%;
margin-right:10%;
margin-top:1%;
height: 430px;
zoom: 200%;
}
div.searchByBlock{
border-style: ridge;
border-color: #000;
float: left;
height: 70%;
width: 46%;
margin-left: 2%;
margin-top:1%;
margin-bottom:1%;
}
div.narrowByBlock{
border-style: ridge;
border-color: #000;
float: right;
height: 70%;
width: 46%;
margin-right: 2%;
margin-top:1%;
margin-bottom:1%;
}
div.searchByText{
margin-left: 2%;
float:left;
text-align:left;
width:46%;
}
div.narrowByText{
margin-right: 1.5%;
float:right;
text-align:left;
width:46%;
}
div.compareAndClearFields{
margin-left: 2%;
float:left;
text-align:center;
width:46%;
}
div.errorMessageDisplayforAdvanceDrugSearch{
margin-left: 2%;
float:right;
text-align:center;
width:46%;
}
div.advancedDrugSearchText{
margin-left: 2%;
}
div.textBelowAdvancedDrugSearchText{
margin-left: 2%;
}
div.browseClassesLink{
float:right;
}
input.search{
background-color: #007fea;
height:30px;
width:40%;
font: bold;
font-color: white;
margin-left: 3%;
}
table.blocksForSearchByAndNarrowBy{
margin-bottom:3%;
}
</style>
<body>

<div class="claro">

<div class="advancedDrugSearchOuterLayout">
    <div class="advancedDrugSearchText">
        <font size="4" color= "mediumorchid"><b>THIS iS AN EXAMPLE</b></font>
     </div>
     <div class="textBelowAdvancedDrugSearchText">
         <font size="3" ><i>THESE ARE DATABASE TEXT</a>
      </div>

    <div>
       <div class="searchByText"> 
            <font size="2"><u><b>searchBy</b><i>SearchTermIsrequired</i></u></font>
       </div>
       <div class="narrowByText">
            <font size="2"><u><b>narrow</b><i>(optional)</i></u></font>
       </div>
    </div>   


    <div class="searchByBlock">

    <table border="1"">
        <tr><td style="width:100px"></td>
            <td><div style="float:right"><a href="#">Browse list of classes</div>
        </td></tr>
        </table>    
<div>       
        <div style="float:left">
            <font size="3">drugClass</font>
        </div>
        <div style="float:right">   
            <input  id="selectDrugClasses">
         </div> 
</div> 
        <div>       
            <table>     
                <tr>
                    <td height="110"></td>
                    <td height="110"></td>
                 </tr>      
            </table>
        </div>  
        <div>       
             <div style="float:left">
                     <font size="3">CLASS</font>
                  </div>                    
                  <div style="float:right">
                           <input id="selectIndications">
                    </div>      
        </div>
    </div>     

    <div class="narrowByBlock">
    <table><tr><td style="width:10px"></td>
        <td> <div style="float:right"><input type="radio" checked="true">include
            <input type="radio">exclude
         </div> 
</td>
</tr>
</table>         

        <div style="float:left">
                               <font size="3">CLINICAL</font>
        </div>
        <div style="float:right">   
                              <input id="selectAdverseEffects">                              
        </div>  
        <div>
        <table> 
            <tr>
                <td height="90"></td>
                <td height="90"></td>
            </tr>
        </table>
    </div>
    <table border="1"><tr><td style="width:10px"></td>
    <td><div  style="float:right">      

            <input type="radio"  checked="true">include
            <input type="radio">exclude

    </div></td></tr>
    </table>

    <div>
        <div style="float:left">
                             <font size="3">Suggestion</font>
        </div>
            <div style="float:right">
                                 <input id="selectDrugInteractions">
        </div>
    </div>
    </div>
    <div>
       <div class="compareAndClearFields">
                <input class="search" type="submit" value="Search & Compare Drugs" name="submit" id="formSubmit" onClick="submitForm()"> 
                <a onClick="resetForm()">clearAllFields</a>
       </div>

    </div>  
</div>
</div>
</body>
</html>

2 个答案:

答案 0 :(得分：2)

我只需添加一个实体大小的div。
这是我的，也许是你想知道的：

<html>
<style type="text/css">
.allbody{
width : 1024px;
height: auto;
margin: 0px auto;
}
div.advancedDrugSearchOuterLayout
{
border-style: groove;
border-color: #005ce5;
margin-left:10%;
margin-right:10%;
margin-top:1%;
height: 430px;
zoom: 200%;
}
div.searchByBlock{
border-style: ridge;
border-color: #000;
float: left;
height: 70%;
width: 46%;
margin-left: 2%;
margin-top:1%;
margin-bottom:1%;
}
div.narrowByBlock{
border-style: ridge;
border-color: #000;
float: right;
height: 70%;
width: 46%;
margin-right: 2%;
margin-top:1%;
margin-bottom:1%;
}
div.searchByText{
margin-left: 2%;
float:left;
text-align:left;
width:46%;
}
div.narrowByText{
margin-right: 1.5%;
float:right;
text-align:left;
width:46%;
}
div.compareAndClearFields{
margin-left: 2%;
float:left;
text-align:center;
width:46%;
}
div.errorMessageDisplayforAdvanceDrugSearch{
margin-left: 2%;
float:right;
text-align:center;
width:46%;
}
div.advancedDrugSearchText{
margin-left: 2%;
}
div.textBelowAdvancedDrugSearchText{
margin-left: 2%;
}
div.browseClassesLink{
float:right;
}
input.search{
background-color: #007fea;
height:30px;
width:40%;
font: bold;
font-color: white;
margin-left: 3%;
}
table.blocksForSearchByAndNarrowBy{
margin-bottom:3%;
}
</style>
<body>
<div class="allbody">
<div class="claro">

<div class="advancedDrugSearchOuterLayout">
    <div class="advancedDrugSearchText">
        <font size="4" color= "mediumorchid"><b>THIS iS AN EXAMPLE</b></font>
     </div>
     <div class="textBelowAdvancedDrugSearchText">
         <font size="3" ><i>THESE ARE DATABASE TEXT</a>
      </div>

    <div>
       <div class="searchByText"> 
            <font size="2"><u><b>searchBy</b><i>SearchTermIsrequired</i></u></font>
       </div>
       <div class="narrowByText">
            <font size="2"><u><b>narrow</b><i>(optional)</i></u></font>
       </div>
    </div>   


    <div class="searchByBlock">

    <table border="1"">
        <tr><td style="width:100px"></td>
            <td><div style="float:right"><a href="#">Browse list of classes</div>
        </td></tr>
        </table>    
<div>       
        <div style="float:left">
            <font size="3">drugClass</font>
        </div>
        <div style="float:right">   
            <input  id="selectDrugClasses">
         </div> 
</div> 
        <div>       
            <table>     
                <tr>
                    <td height="110"></td>
                    <td height="110"></td>
                 </tr>      
            </table>
        </div>  
        <div>       
             <div style="float:left">
                     <font size="3">CLASS</font>
                  </div>                    
                  <div style="float:right">
                           <input id="selectIndications">
                    </div>      
        </div>
    </div>     

    <div class="narrowByBlock">
    <table><tr><td style="width:10px"></td>
        <td> <div style="float:right"><input type="radio" checked="true">include
            <input type="radio">exclude
         </div> 
</td>
</tr>
</table>         

        <div style="float:left">
                               <font size="3">CLINICAL</font>
        </div>
        <div style="float:right">   
                              <input id="selectAdverseEffects">                              
        </div>  
        <div>
        <table> 
            <tr>
                <td height="90"></td>
                <td height="90"></td>
            </tr>
        </table>
    </div>
    <table border="1"><tr><td style="width:10px"></td>
    <td><div  style="float:right">      

            <input type="radio"  checked="true">include
            <input type="radio">exclude

    </div></td></tr>
    </table>

    <div>
        <div style="float:left">
                             <font size="3">Suggestion</font>
        </div>
            <div style="float:right">
                                 <input id="selectDrugInteractions">
        </div>
    </div>
    </div>
    <div>
       <div class="compareAndClearFields">
                <input class="search" type="submit" value="Search & Compare Drugs" name="submit" id="formSubmit" onClick="submitForm()"> 
                <a onClick="resetForm()">clearAllFields</a>
       </div>

    </div>  
</div>
</div>
</div>
</body>
</html>

答案 1 :(得分：1)

我们可以使用css样式将对齐失败的影响限制在一定程度。如果您打算使页面动态地与缩放重新对齐。我更喜欢你让它成为一个响应式设计。使用Boot Strap它是一个可以解决这些问题的强大工具。

正如临时修复更改这些样式

div.searchByBlock {
    border-color: #000000;
    border-style: ridge;
    float: left;
    height: 70%;
    margin: 1% 1% 1% 2%;
    width: 45%;
}

div.narrowByBlock {
    border-color: #000000;
    border-style: ridge;
    float: left;
    height: 70%;
    margin: 1% 2%;
    width: 45%;
}

div.advancedDrugSearchOuterLayout {
    border-color: #005CE5;
    border-style: groove;
    float: left;
    height: 430px;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 1%;
}
相关问题
最新问题