我想把两个人放在<div>一起.右边<div>约200px; 并且左侧<div>必须填满屏幕宽度的其余部分?我怎样才能做到这一点?
我尝试使用css内联属性将div节点显示在一行中,下面是我的代码
<html>
<head>
<style type="text/css">
.inline {
display: inline;
border: 1px solid red;
margin:10px;
}
</style>
</head>
<body>
<div>
<div class='inline'><div>I'm here</div></div>
<div class='inline'><div>I'm follow</div></div>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
结果不对,类'内联'的两个div仍然显示在两行中,并且边框也显示不正确.我不知道发生了什么,谁能帮帮我?
谢谢
在这个问题中,有人遇到了布局问题,因为他们在非浮动div中有两个浮动的div.我建议添加float: left到他们的外部div,这确实解决了问题.其他人建议添加overflow: hidden,令我惊讶的是,也有用.
这似乎完全没有目的overflow: hidden.显然溢出:隐藏导致元素以某种方式以不同方式查看他们的孩子.我真正想要了解的是这有什么区别.直观地说,它应该只使元素小于它本来可以的,从不大,我不明白它为什么会影响布局层次结构.
任何人都可以解释为什么这将是正确/必要的行为,或者这只是一个浏览器怪癖?他们的另一个方面是我失踪的溢出财产吗?两种解决方案都比另一种更好吗?
编辑:我发现设置overflow: auto也是如此,所以看起来溢出的重要性并不重要,只是它设置了.我还是不明白为什么.
我需要在页面的第一个宽度%20和页面的第二个宽度%80之间放置2个div.我不知道哪个位置我必须给div.相对的,固定的,绝对的,继承的?
我该怎么做?