小编Sha*_*lor的帖子
为什么这个内联块元素被推下？
以下是我的代码,我想了解为什么 #firstDiv被所有浏览器推倒.我真的想要理解这样一个事实的内在运作,即它被推向下而不是以某种方式向上拉.(我知道如何调整他们的上衣:))
而且我知道它的溢出:隐藏了导致它,但不确定为什么它推动该div向下.
body {
width: 350px;
margin: 0px auto;
}
#container {
border: 15px solid orange;
}
#firstDiv {
border: 10px solid brown;
display: inline-block;
width: 70px;
overflow: hidden;
}
#secondDiv {
border: 10px solid skyblue;
float: left;
width: 70px;
}
#thirdDiv {
display: inline-block;
border: 5px solid yellowgreen;
}推荐指数
解决办法
查看次数
了解显示:table-cell; 功能
请注意,我并非尝试解决任何特定问题,而是试图了解 导致此问题的原因.
我已经设置了width,height和display一些div的,但是高度/宽度设置没有被兑现.该文本也被推向下方.
1)为什么height在表格行中设置时向下推文本然后height删除时将文本放在顶部？
2)为什么宽度/高度设置不受尊重？
3)为什么不设置margin属性对它们有任何影响？
推荐指数
解决办法
查看次数
更具体的CSS规则不起作用
在我的下面的代码中,我已经为h1定义了更具体的规则为#inner h1,并且为#container h1定义了更少的特定规则.但是如果将#container h1放在#inner h1之后然后它会生效并且#inner h1被忽略,而它不应该是因为它更具体.
请帮助我理解这个问题.
CSS:
#inner h1 { font-size:25px; }
#container h1 { font-size:15px; }
HTML:
<div id="container">
<div id="inner">
<h1>Hello World!</h1>
</div>
</div>
推荐指数
解决办法
查看次数
Doctype和CSS
我有以下代码与doctype transitional,但当我将其设置为strict时,图像的位置会发生变化并向上移动.能否帮助我理解潜在的问题,以及在哪里可以找到不同doctypes之间这些类型的其他CSS冲突的列表.
请注意,我知道很少有HTML标签在严格模式下不可用,但我特别关注CSS冲突.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<style type="text/css">
span.check:before { content: url("http://i41.tinypic.com/2rxea7d.png"); }
</style>
<table>
<tr>
<th>Ruby on Rails</th>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
</tr>
<tr>
<th>Road on Rails</th>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
</tr>
</table>
</body>
</html>
推荐指数
解决办法
查看次数
元素选择器如何比id选择器更具体？
据我所知,元素是最不具体的.(元素vs id).请帮助我一般了解选择者的特异性.
<div id="container">
<div id="firstDiv">FIRST Div inside CONTAINER</div>
<div id="secondDiv">SECOND Div inside CONTAINER</div>
</div>
body{
width: 780px;
margin: 20px auto;
}
#container > div:not(:last-of-type){
margin-bottom: 0px; /*How its more specific than ID selector below? */
}
#container {
border: 15px solid orange;
padding: 10px;
}
#firstDiv{
margin: 50px; /*This is not taking effect*/
border: 5px solid blueviolet;
}
#secondDiv{
border: 5px solid brown;
}
推荐指数
解决办法
查看次数
负左边缘问题和神秘的4px差异
我抓了很长时间,终于决定寻求帮助.实际上我有一个带有两个输入(字段+按钮)的简单表单,我想在将表单包装到文本字段+填充的正确宽度时将按钮放在字段上.
我在按钮上使用margin-left:-31px,设置宽度为27px.
你可以尝试一下http://jsfiddle.net/UfK6K/
,它似乎
但是当我设置margin-left:-32px时会破坏布局.
http://jsfiddle.net/UfK6K/1/并出现
现在,如果我将按钮的宽度更改为任何数字,并且我保持边距保持在负4px差异内它可以工作但是当它增加时像-32px一样它会中断.
我想了解4px的差异在哪里发挥作用？当然,我怎样才能将按钮位移到文本字段上？
*除了Opera之外,所有浏览器都会中断.
推荐指数
解决办法
查看次数
理解:之后和:之前
为什么内容出现在div中？div不在左/右(之前/之后)？
推荐指数
解决办法
查看次数