以下是我的代码,我想了解为什么 #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;
}请看看这个小提琴 - http://jsfiddle.net/Z27hC/
var container = document.createElement('span');
container.style.display = 'inline-block';
container.style.marginTop = '10px';
container.style.marginLeft = '50px';
container.style.background = 'lightblue';
document.body.appendChild(container);
var cell = document.createElement('span');
cell.style.display = 'inline-block';
cell.style.border = ' 2px solid black';
cell.style.width = '200px';
cell.style.height = '16px';
cell.style.overflow = 'hidden';
container.appendChild(cell);
var text_node = document.createTextNode('hallo');
cell.appendChild(text_node);
我有一个容器,包含一个包含文本节点的单元格.单元具有固定的宽度.
如果传递给文本节点的文本超出宽度,我希望它被截断,所以我将单元格设置为'overflow:hidden'.
它有效,但它会使细胞的高度增加3px.单元格有边框,但增加的高度显示在边框下方,而不是在边框内.
由于我在电子表格样式中有许多单元格,因此会弄乱布局.
我在IE8和Chrome上测试了这个,结果相同.
任何以下解决方案都可以 -
根据要求,这是一个新的小提琴,显示了一个更完整的例子.
http://jsfiddle.net/frankmillman/fA3wy/
我希望这是不言自明的.如果您需要更详细的解释,请告诉我.
这是(希望)我最后的小提琴 -
http://jsfiddle.net/frankmillman/RZQQ8/
它融合了所有响应者的想法,现在可以按照我的意愿运作.
主要有两个变化.
第一个是Mathias的表解决方案的灵感来源.而不是包含空行和数据行的中间容器,其中一个是隐藏的,一个是显示的,我现在只在顶层容器中有交替的空白和数据行.我认为这不会影响我的布局问题,但它会删除一个图层并简化代码.
所有响应者建议的第二个变化实际上解决了这个问题.我没有使用显示'内联块'的'span'类型的元素,而是使用'div',并仔细混合'float left'和'float right'来实现我想要的布局.
非常感谢大家.
在这个例子中 ......
<body>
<div>
<div>foo bar</div>
</div>
</body>
body, html, div {
height: 100%;
margin: 0;
}
div div {
display: inline-block;
overflow: hidden;
}
为什么会overflow: hidden导致垂直滚动条？此外,为什么这个高度不归因于页面上的任何内容？这就像一个无形的边缘.
所有元素的100%高度都是有意的.理论上,这应该导致最内部的div扩展以满足视口.它确实如此!...只要overflow: hidden不存在,为什么？
我已经成功地设法在同一条线路上<p>跟进<h>,但是我希望在新线路上重复这一点,但接下来<h>是从最后一线开始<p>- 我该怎么办？
我尝试了各种"清晰"选项,但没有一个打破内联.我真的不想使用<br>或有空<p>,不过于乐意用它们包围<div>.
注意 - 我已经尝试inline从第二个<h>元素中删除它,虽然这确实将<h>新行放在了新行上,但下面的内容<p>最终也会出现在它自己的新行上.
CSS
.inline {display: inline;}
.newline {clear: left;}
HTML
<h5 class="inline">Heading:</h5>
<p class="inline">Some text.</p>
<h5 class="inline newline">Next Heading:</h5>
<p class="inline">Some more text.</p>
这是我想要实现的结果:
标题:一些文字.
下一页标题更多文字.
但相反,我得到了这个:
标题:一些文字.下一页标题更多文字.
任何建议 - 尽量保持代码简单和整洁.
[更新]
暂时我将按照hafid2com的建议添加一个空div,使用以下内容(只需添加高度即可获得所需结果):
.clear { clear: both; display: block; content: ""; width: 100%; }
<div class="clear"></div>
正如小提琴所示:http: …