Question

我有一些div元素没有扩展以匹配其内容的高度。我读过这可能是浮动内容引起的;这个内容并没有浮动 - 虽然我开始觉得我应该把我的电脑扔进河里。这算数了吗？

代码：

＆＃13;

#interaction-options-container.display-dialogue {
    left: 15%;
    width: 70%;
}
#interaction-options-container.full-border, .dialogue-container.full-border {
    border: 1px solid #33ffff;
}
#interaction-options-container {
    margin: 4px 0px 4px 0px;    
    z-index: 100;
    position: absolute;
    left: 35%;
    bottom: 4%;
    width: 30%;
    line-height: 1.4;
    opacity: 0.75;  
}
#interaction-options-container .heading {
    font-size: 16px;
    color: black;
    padding: 0.1px 12px 0.1px 12px;
    background-color: grey;
}
.heading {
    font-weight: bold;
    font-size: 1.5em;
    padding: 8px 12px 0px 12px;
}
#interaction-options-container p {
    margin: 8px 0px 8px 0px;
}
#interaction-options-container .dialogue p {
    margin: 4px 0px 4px 0px;
}
#interaction-options-container .button, #interaction-options-container .evidence-options-container .button {
    cursor: pointer;
    color: white;
    font-size: 14px;
    padding: 0.1px 12px 0.1px 12px;
    background-color: #333333;
    opacity: 0.85;
    border-bottom: 1px solid #8d8d8d;
}
#interaction-options-container .dialogue-container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 32px;
    background-color: #333333;
    float: none;
}
#interaction-options-container .dialogue {
    text-align: center;
    margin: auto;
    font-size: 16px;
    font-weight: bold;
    padding: 1px 12px 1px 12px;
    color: white;
    background-color: #333333;
}
.dialogue-container .dialogue.option-divider {
    border-bottom: 1px solid #333333;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

＆＃13;

<div class="hud-element display-dialogue full-border" id="interaction-options-container">
    <div class="heading"><p>Choose a reply:</p></div>
        <div class="dialogue-container button">
            <div class="dialogue option-divider"><p>Option one here</p></div>
        </div>
    <div class="dialogue-container button">
        <div class="dialogue option-divider"><p>Option two here</p></div>
    </div>
    <div class="dialogue-container button">
        <div class="dialogue option-divider"><p>Option three here</p></div>
    </div>
    <div class="dialogue-container button">
        <div class="dialogue"><p>Option four here. As an example this text should be long enough to require wrapping to a new line. I will therefore have to keep typing until I've added enough text to sufficiently fill the horizontal with of the containing div. Also, thanks for potentially answering my question, which I will get to below...</p></div>
    </div>
</div>

＆＃13;

问题是，当一段对话需要换行到一个新行时，.dialogue-container .button div的高度不会扩展到与height div的.dialogue匹配。内部divs因此延伸越过边界线，这看起来很糟糕如果有人有任何指示，我的电脑会感谢你。欢呼声。

Answer 1

#interaction-options-container .dialogue-container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    //height: 32px;
    background-color: #333333;
    float: none;
}

HTML / CSS：Div不扩展到内容的高度

1 个答案: