[英]Odd CSS/div spacing issue with simple page
我有以下页面:HTML:
<div class="spacer">
<div id="conversation"></div>
</div>
<div class="colorbox">
</div>
<div class="box">
<div id="message"> XXXX </div>
</div>
CSS:
body {padding: 0; margin: 0; overflow: hidden; font-family: Helvetica;}
.box {
background-color: #FFFFFF;
height:200px;
width: 700px;
border-top-style:solid;
border-top-width: 2px;
border-top-color: #EEEEEE;
display: inline-block;
}
.spacer {
background-color: #FFFFFF;
height:40px;
}
.colorbox{
display: inline-block;
height:120px;
width:120px;
border:1px solid #000;
background-color:blue;
}
#message{
margin:5px;
}
JS小提琴: http : //jsfiddle.net/qtv4c10o/5/
我希望能够删除XXX文本而无需在该边框中移动该行,但是很遗憾,这是行不通的。 当我删除它时,该行将如下所示:
http://jsfiddle.net/qtv4c10o/6/
我最终将使用javascript更新XXX文本,并且不希望边界线也移动。
您的线位于蓝色方块下方的原因是:
您为box类提供了700px的固定宽度。
因此,如果减小窗口的大小,则行数不能达到700px:它必须移到有更多空间的位置,即在框下方。
解决方案:给它一个在剩余空间内可以达到的宽度
该问题已通过聊天解决。 这是一个可行的解决方案:
让我们首先用outer
div包裹colorbox
和box
。
<div class="outer">
<div class="colorbox"></div>
<div class="box">
<div id="message"> XXXX </div>
</div>
</div>
outer
是这样的:
.outer {
width:100%;/* the whole width available */
height:120px;/* same height as blue square */
display:table;
}
我们将为outerbox
以下属性:
display:table-cell;
并添加到框中:
width: 100%; //the remaining width, actually
margin-top:105px; // blue square height minus height of message
这是一个有效的小提琴: http : //jsfiddle.net/xzxn4rzf/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.