繁体   English   中英

简单页面的奇怪CSS / div间距问题

[英]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包裹colorboxbox

<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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM