如何处理放大时我的div被扭曲的问题？

有代码的两个问题我已经写了，我不知道该如何解决：如何处理放大时我的div被扭曲的问题？

如何在网页上看起来谷歌浏览器

Google Chrome

那我的div的两个列做当我放大和缩小时不会一起缩放。

如果我放大过去一定量时，div小号胸围他们的容器，完全扭曲了网页。

enter image description here

Here's有关HTML和CSS代码，任何人想看看它谁的小提琴。

我希望当用户放大或缩小放大或缩小div的位置。

编辑：达线＃130是描述了我编写这个页面的元素相关的CSS代码，CSS的其余部分是从引导和无关（这个问题）

来源

2013-05-14 Louis93

要做到这一点，你必须为div的宽度或容器宽度分配一个值。像这样：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 

<style> 
body{ 
     font-size:36px; 
     font-family:Arial, Helvetica, sans-serif; 
     } 
.mega_cont{ 
    margin:0 auto; 
    padding-top:10%; 
    width:710px; 
    } 
.super_cont_lhs{ 
    float:left; 
    width:300px; 
    margin-right:5px; 
    } 

.cont1{ 
    width:100%; 
    float:left; 
    height:auto; 
    background-color:#000; 
    margin-bottom:10px; 
    color:#CCC; 
    } 
.cont2{ 
    width:100%; 
    float:left; 
    height:auto; 
    background-color:#000; 
    color:#CCC; 
    } 
.super_cont_rhs{ 
    width:400px; 
    float:left; 
    height:auto; 
    background-color:#F60; 
    } 
</style> 
</head> 

<body> 

<div class="mega_cont"> 
<div class="super_cont_lhs"> 
    <div class="cont1">P - S P E C T R A</div> 
    <div class="cont2">B E G I N</div> 
</div> 
<div class="super_cont_rhs"> 
P-Spectra enables practicing engineers to design seismic retrofit solutions with supplemental dampers using performance based design. 
</div> 
</div> 
</body> 
</html>

来源

2013-05-19 01:48:36

非常好，谢谢。我通过阅读干净的代码了解了很多。 – Louis93 2013-05-21 02:10:22

什么是你想要的效果？当他们放大时，就好像整个页面被缩放了一样？或者你想要背景等保持静态，只放大前景内容？

短的，你可以禁用的规模，使这些类型的失真可能永远不会发生：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

来源

2013-05-14 01:48:44

我粘贴，根据''，没有按似乎行为不同。在小提琴中试试看？我希望这个页面看起来好像是放大或缩小时的缩放... – Louis93 2013-05-14 01:53:11

坦率地说，你的问题是，一切都是固定的宽度和高度，这意味着如果你改变你的窗口宽度或放大，容器将会重叠，尤其是在使用绝对位置时，您似乎正在做很多事情，请尝试使用浮动元素重新设计您的布局。 – 2013-05-14 02:40:18

阅读这篇文章：http://cameronmoll.com/archives/2009/06/page_zooming_vs_text_scaling/ – 2013-05-14 02:41:33

坏消息是，它是不是伤了你的设计变焦，它的浏览器更改尺寸。

尝试将缩放设置为50％，然后将浏览器窗口更改为其大小的一半。你的显示再次正确，不是吗？

现在将缩放比例保持为100％，然后更改浏览器尺寸。它无论如何都打破了，不是吗？

当您在维度中混合像素和％时，布局高度依赖于浏览器的大小。为了避免这种情况，您只能使用像素，或者仅使用％，但不能混合使用。（或混合控制得非常好，你混合它们！）

当你放大，不改变你的浏览器的大小，这就像你让浏览器尺寸更小（根据新的缩放因子）

来源

2013-05-17 19:49:42 vals

你必须设计液体页面。使页面响应并且您的上述问题将简单地消失。也为响应式设计页面更好地使用bootstrap。 Bootstrap将使您轻松设计响应式设计。这里是链接下载引导所有的指令来使用它... http://twitter.github.io/bootstrap/

来源

2013-05-22 07:11:39

您正在查找responsive design。

基本上，使它两列，而不是3个定位的块。摆脱所有明确的width s，并失去绝对定位。然后设置display:inline-block（或@ShannonHochkins说你可以使用float:left。我只是喜欢内嵌块）和基于％的宽度。

这里亚去：http://jsfiddle.net/daCrosby/Dtcrn/1/

我删除了很多额外的代码（<head>，<script>，等等） - 这是不是在你的网站上额外的，它只是使的jsfiddle清洁。

这里是如何美的2列的一个最基本的例子：

HTML

<div id="nav_bar"> 
     [ ... ] 
    </div> 

    <div id="about_block"> 
     [ ... ] 
    </div>

CSS

#nav_bar, 
#about_block{ 
    display:inline-block; 
    vertical-align:top; 
    margin-left:-4px; 
    width:25%; 
} 
#about_block{ 
    width:75%; 
}

来源

2013-05-22 21:40:54 DACrosby

如何处理放大时我的div被扭曲的问题？

回答

相关问题