个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
当窗口如下图所示缩放时，如何避免 float 元素掉落？
我尝试在容器上设置 min-width 但 IE7 和 FF 对其的解释不同并且列出现不同的宽度产生:
fiddle 在这里 http://jsfiddle.net/GEgYm/
<body>
<div id="wrapper1">
<div id="header">
<h1>This is the header</h1>
</div>
<div id="maincol">
<div id="leftcol">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt nunc ut ipsum vestibulum semper. In hac habitasse platea dictumst. Nam accumsan leo malesuada, molestie enim bibendum, suscipit sapien. Etiam tempus tempus sapien, nec hendrerit orci dapibus id. Aliquam fermentum purus id pellentesque imperdiet. Donec ac condimentum sapien, at pretium dolor. Donec imperdiet vitae nibh quis pulvinar. Morbi diam ligula, molestie mattis tincidunt non, tempus vitae dui. Mauris odio turpis, egestas lacinia imperdiet sed, dignissim eget nibh. </p>
</div>
<div id="rightcol">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt nunc ut ipsum vestibulum semper. In hac habitasse platea dictumst. Nam accumsan leo malesuada, molestie enim bibendum, suscipit sapien. Etiam tempus tempus sapien, nec hendrerit orci dapibus id. Aliquam fermentum purus id pellentesque imperdiet. Donec ac condimentum sapien, at pretium dolor. Donec imperdiet vitae nibh quis pulvinar. Morbi diam ligula, molestie mattis tincidunt non, tempus vitae dui. Mauris odio turpis, egestas lacinia imperdiet sed, dignissim eget nibh. </p>
</div>
<div id="centercol">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt nunc ut ipsum vestibulum semper. In hac habitasse platea dictumst. Nam accumsan leo malesuada, molestie enim bibendum, suscipit sapien. Etiam tempus tempus sapien, nec hendrerit orci dapibus id. Aliquam fermentum purus id pellentesque imperdiet. Donec ac condimentum sapien, at pretium dolor. Donec imperdiet vitae nibh quis pulvinar. Morbi diam ligula, molestie mattis tincidunt non, tempus vitae dui. Mauris odio turpis, egestas lacinia imperdiet sed, dignissim eget nibh. </p>
</div>
</div>
<div id="footer">
<p>This is the footer</p>
</div>
</div>
</body>
CSS:
body {
text-align:center;
margin:20px;
padding:0;
font:normal 0.8em/1.2em verdana,aria,sans-serif;
color:#666;
}
#wrapper1 {
position:relative;
text-align:left;
width:80%;
margin:auto;
}
#header {
background:#BB62AB;
padding:10px;
margin:0;
text-align:center;
color:#FFF;
}
#maincol {
position:relative;
margin:0;
padding:10px;
}
#leftcol {
position:relative;
top:-10px;
left:-10px;
float:left;
width:220px; /* for IE5/WIN */
width:22%; /* actual value */
margin:0 0 -10px 0;
padding:10px;
background:#ECB9E8;
z-index:100;
}
#rightcol {
position:relative;
top:-10px;
right:-10px;
float:right;
width:220px; /* for IE5/WIN */
width:22%; /* actual value */
margin:0 0 -10px 0;
padding:10px;
background:#D7C4FA;
z-index:99;
}
#centercol {
float: left;
position:relative;
padding:0 2px;
width:50%;
}
最佳答案
发生这种情况是因为您在所有 3 个 float 容器中使用了 padding。尝试删除填充或更好地使用子容器中的 padding。
我在 p 标签而不是父容器中包含了填充。现在所有 3 列都不会折叠。
另一种方法是对列使用百分比宽度(如果知道父项的宽度，则使用绝对值)并包含 padding 值，这样宽度的总和将等于(或小于)100%。示例:
#rightcol{width:23%; padding:0 1%} /*25%*/
#leftcol{width:23%; padding:0 1%} /*25%*/
#midcol{width:48%; padding:0 1%} /*50%*/
注意:如果您使用 border，您还应该在父级的总宽度中包含边框的宽度。即使您使用 1px 边框，它也会使 float 元素折叠。
关于html - 防止 float 元素在窗口缩放时掉落，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21384304/
25
4
0
我有一个应用程序，其中许多对象都扩展了一个抽象类，该抽象类定义了诸如 create() edit() retrieve() 和 delete()。由于每个子类对这些函数使用相同的逻辑，抽象类定义了默认
我正在使用$anchorScroll滚动到页面顶部，其中 html 元素具有 ID #brand。 AngularJS 代码: $location.hash(
我想停用我的应用程序中的右键单击，该右键单击提供了在桌面上安装应用程序的选项。我该如何做这样的事情？ 最佳答案 右键单击 Visual Studio 中的项目并选择属性。那里有一个复选框“启用浏览器运
我使用 jquery 定位 div，在我的 CSS 中我有一个 div.right-sm:hover{background-color: blue} 我想使用 jquery 停止悬停: $(this
所以，我正在尝试复制 html5“占位符”属性功能。 我目前坚持的一件事是，在获得元素焦点时，插入符号立即出现在输入的开头。 就目前情况而言，插入符号出现在用户单击的位置，然后当我使用 jQuery
当表单填写并发送时，如果您刷新页面，它表示表单将再次发送。 (再次提交表格)。 防止这种情况发生的好方法是什么？或者终止这个 session ？ 这方面有什么指导吗？ 谢谢 最佳答案 处理完POST信
我想阻止 @ 被输入到 input 中。但它不起作用，知道为什么吗？ $(function() { $(document).on('keyup', '[placeholder="x"]', fun
我正在使用 PHP 创建一个应用程序并涉及 MySQL。如果在请求过程中发生错误，我将如何“将查询分组在一起”，检查它是否会成功，然后对真实表进行实际影响。如果对表的实际更新失败，则恢复到更新之前的状
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: Best Java obfuscator ? 对于我的示例，我知道 eclipse 提供了一个反编译插件。而
这是一个演示我的问题的 fiddle :JSFiddle 我正在制作自定义下拉菜单(实际上我使用的是 icomoon 图标而不是 V)...它看起来不错，但是父元素的 ::after 是阻止选择:(
每当我编写需要大量条件的代码时，我都会这样做: if foo: if bar: if foobar: if barfoo: if foobarfoo:
我不确定术语是否正确，您可以使用哪些代码实践来使某人难以修改二进制文件/程序集以绕过检查: 例如在源代码中。 bool verificationResult = verify(); if (verif
我正在寻找一种简单的方法来检查多个零件表，以确定给定零件号在添加到给定表之前是否已经存在。 我目前想到的最好的想法是一个辅助表，它简单地将所有表中的每个 PN 列在一个列中，并带有一个唯一的键；但是我
这个问题在这里已经有了答案: jquery stop child triggering parent event (7 个答案) 关闭 8 年前。 我不确定这是否真的冒泡，我会解释。 我有这个:
我有一个 Spring MVC web 应用程序(不确定该信息是否重要，但它可能是)使用 ModelAndView 将字符串值传递给 JSP 文件。 字符串值的形式是: d@.
我在这里尝试使用表单 key 方法进行 csrf 保护 http://net.tutsplus.com/tutorials/php/secure-your-forms-with-form-keys/
htmlentities 是防止 PHP 中的 XSS 的最佳解决方案吗？我还想允许像 b、i、a 和 img 这样的简单标签。实现这一点的最佳解决方案是什么？我确实考虑过 bbcode，但发现如果没
我有一个非常基本的 JAX-RS 服务(下面的 BookService 类)，它允许创建 Book 类型的实体(也在下面)。 POST负载 { "acquisitionDate": 14188
我正在使用 Polymer 1.5，我确实需要“this”变量不要映射到外部。我知道 typescript 会为某些人做这件事 valid reasons . declare var Polymer:
这个问题在这里已经有了答案: Class-level read-only properties in Python (3 个答案) 关闭 6 年前。 有没有一种方法可以通过重写实例变量的 __set
我是一名优秀的程序员,十分优秀！