Question

我有以下页面： 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文本，并且不希望边框线移动。

Answer 1

你的线在蓝色方块下面的原因是：

你给盒子类固定宽度700px。

因此，如果你缩小窗口的大小，你的行不能达到700px：它必须去有更多空间的地方，即在框下方。

解决方案：给它一个可以在剩余空间内实现的宽度

问题已在聊天中解决。这是一个有效的解决方案：

让我们先用colorbox div包裹box和outer。

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

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

1 个答案: