HTML浏览器缩放导致对齐问题
我有两个div元素，左浮动，右浮动，在一个div元素中。当我缩放浏览器时，所有的对齐方式都会改变。缩放应该是这样的…我们如何缩放图像…有人能给出解决这个问题的建议吗HTML浏览器缩放导致对齐问题,html,Html,我有两个div元素，左浮动，右浮动，在一个div元素中。当我缩放浏览器时，所有的对齐方式都会改变。缩放应该是这样的…我们如何缩放图像…有人能给出解决这个问题的建议吗 <html> <style type="text/css"> div.advancedDrugSearchOuterLayout { border-style: groove; border-color: #005ce5; margin-left:10%; margin-right:10%; margin-t
<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>
高级药物搜索外部布局分区
{
边框样式：凹槽；
边框颜色：#005ce5；
左边距：10%；
保证金权利：10%；
利润率最高：1%；
高度：430px；
缩放：200%；
}
分区搜索块{
边缘样式：脊；
边框颜色：#000；
浮动：左；
身高：70%；
宽度：46%；
左缘：2%；
利润率最高：1%；
利润底部：1%；
}
狭长街区分区{
边缘样式：脊；
边框颜色：#000；
浮动：对；
身高：70%；
宽度：46%；
保证金权利：2%；
利润率最高：1%；
利润底部：1%；
}
div.searchByText{
左缘：2%；
浮动：左；
文本对齐：左对齐；
宽度：46%；
}
div.nerrowByText{
保证金权利：1.5%；
浮动：对；
文本对齐：左对齐；
宽度：46%；
}
div.compareAndClearFields{
左缘：2%；
浮动：左；
文本对齐：居中；
宽度：46%；
}
用于高级药物搜索的div.errormessage显示{
左缘：2%；
浮动：对；
文本对齐：居中；
宽度：46%；
}
高级药物搜索文本{
左缘：2%；
}
div.textBelowAvancedDrugsearchText{
左缘：2%；
}
分区BrowseclasssLink{
浮动：对；
}
input.search{
背景色：#007fea；
高度：30px；
宽度：40%；
字体：粗体；
字体颜色：白色；
左缘：3%；
}
table.BlocksForeArchby和Nearhby{
利润底部：3%；
}
这是一个例子
这些是数据库文本
需要通过搜索终端进行搜索
窄（可选）
我们可以使用css样式将对齐失败的影响限制到一定程度。如果要使页面与缩放动态重新对齐。我更喜欢你做一个反应灵敏的设计。使用bootstrap，它是一个能够解决这些问题的强大工具
就像临时修复程序更改这些样式一样
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%;
}
我只是添加了一个具有实体大小的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>
.全体{
宽度：1024px；
高度：自动；
保证金：0px自动；
}
高级药物搜索外部布局分区
{
边框样式：凹槽；
边框颜色：#005ce5；
左边距：10%；
保证金权利：10%；
利润率最高：1%；
高度：430px；
缩放：200%；
}
分区搜索块{
边缘样式：脊；
边框颜色：#000；
浮动：左；
身高：70%；
宽度：46%；
左缘：2%；
利润率最高：1%；
利润底部：1%；
}
狭长街区分区{
边缘样式：脊；
边框颜色：#000；
浮动：对；
身高：70%；
宽度：46%；
保证金权利：2%；
利润率最高：1%；
利润底部：1%；
}
div.searchByText{
左缘：2%；
浮动：左；
文本对齐：左对齐；
宽度：46%；
}
div.nerrowByText{
保证金权利：1.5%；
浮动：对；
文本对齐：左对齐；
宽度：46%；
}
div.compareAndClearFields{
左缘：2%；
浮动：左；
文本对齐：居中；
宽度：46%；
}
用于高级药物搜索的div.errormessage显示{
左缘：2%；
浮动：对；
文本对齐：居中；
宽度：46%；
}
高级药物搜索文本{
左缘：2%；
}
div.textBelowAvancedDrugsearchText{
左缘：2%；
}
分区BrowseclasssLink{
浮动：对；
}
input.search{
背景色：#007fea；
高度：30px；
宽度：40%；
字体：粗体；
字体颜色：白色；
左缘：3%；
}
table.BlocksForeArchby和Nearhby{
利润底部：3%；
}
这是一个例子
这些是数据库文本
需要通过搜索终端进行搜索
窄（可选）
为什么要缩放？缩放不能导致对齐问题，这是要求。因为当您看到w3学校网站时，无论我们缩放多少，，，对齐方式不会改变..这就像缩放图像..同样..此html设计在缩放时也应遵循此原则在px
中设置宽度和高度（而不是%
），或者你可以根据定义的大小在%
中设置它们。试过Rinaldi..它力有效，但它对我有效：在缩放时它在一定程度上受到控制…如何使用引导？是的，AKhil…它们的样式适合按块搜索…但不适合按块缩小它是web开发的框架。它很容易实现。结帐网站下载软件包。只需阅读手册。作为第二个选项，您可以使用媒体查询。但这需要一些努力，比如为每个分辨率创建单独的设计，为每个分辨率创建不同的样式。我只更正了您在问题上提到的那些主框。