Question

我正在为我的游戏社区制作服务器状态网站。我偶然发现了一个没有用文字改变高度的盒子的问题。

目前这是我的CSS：

.explain_container {
    border: 1px solid #BFC4C7;
    background: white;
    width: 1000px;
    height: 120px;
    position: relative;
    font-size: 14px;
    color: #5A5A5A;
}
.explain_text {
    width: 900px;
    height: 50px;
    position: relative;
    top: 50px;
    margin-left: auto;
    margin-right: auto;
}

这是我的HTML：

<div class="explain_container">
    <div class="explain_text">
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
    </div>
</div>

所有4方都应该有大约50px的保证金。我该如何解决这个问题？

Answer 1

通过使用.explain_container并在所有方面使用填充，我解决了相当容易的问题！没有定义高度！

Answer 2

.explain_container {
border: 1px solid #BFC4C7;
background: white;
width: 1000px;
position: relative;
font-size: 14px;
color: #5A5A5A;
}
.explain_text {
width: 900px;
margin-left: auto;
margin-right: auto;
}

 <div class="explain_container">
        <div class="explain_text">
            Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box.
        </div>
    </div>

删除Div的高度并删除顶部位置

Answer 3

通过将顶部偏移添加到内部容器，您可以相对于外部容器移动它。您打算将protected internal JsonResult Json(object data);添加到外部容器中。

演示：

top:50px

.explain_container {
border: 1px solid #BFC4C7;
background: white;
width: 1000px;
height: 120px;
position: relative;
font-size: 14px;
color: #5A5A5A;
top: 50px;
}
.explain_text {
width: 900px;
height: 50px;
position: relative;

margin-left: auto;
margin-right: auto;
}

Answer 4

所以有几个问题。正如@nicael所提到的，第一个是添加了顶级属性。但是，您还需要删除每个容器上的显式高度属性。如果要在文本和容器之间添加空格，请使用填充。将当前高度替换为.explain_container { border: 1px solid #BFC4C7; background: white; width: 1000px; height: auto; position: relative; font-size: 14px; color: #5A5A5A; } .explain_text { width: 900px; height: auto; position: relative; margin-left: auto; margin-right: auto; padding: 10px; }，如下所示：

<div class="explain_container">
    <div class="explain_text">
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
    </div>
</div>

key

Answer 5

我认为您应该移除height的{{1}}，而是将其设置为自动。然后使用explain_container而不是margin。

This jsFiddle可能是一种可能的解决方案。

＆＃13;

padding

＆＃13;

.explain_container {
  border: 1px solid #BFC4C7;
  background: white;
  width: 1000px;
  height: auto;
  position: relative;
  font-size: 14px;
  color: #5A5A5A;
}

.explain_text {
  width: 900px;
  height: auto;
  position: relative;
  padding: 50px;
}

＆＃13;

根据文字调整框的宽度

5 个答案: