<div> 中的文本重叠

Question

我从 java 脚本向<div> 插入文本。看起来<div> 标签的宽度和高度已经设置好了。因此，如果我插入大段文字，则<div> 会与下面的其他<div> 重叠。

    $("#formDescription").text($("#Description").val());

html

<div class="col-sm-10 col-sm-offset-1" id="box_front_bottom" style="display: none;">
    <div class="panel panel-default">
       <div class="panel-body">
            ---
            ---
             <div class="form-group">
                <div class="col-sm-5" style="overflow: auto">
                    @Html.Label("Description", new { @class = "control-label" })
                </div>
                <div class="col-sm-7" id="formDescription">
                </div>
            </div>

如果我使用较少的文字，它将显示为这样

JSFiddle

Answer 1

使用引导 CSS，您可以使用 float:left 设置该信息的容器，您可能需要清除浮动以将每个表单保持在单独的行中；使用这个：

.form-group:after {
  content: " ";
  display:block;
  clear:both;
}

演示http://jsfiddle.net/Q2FHr/2/

Answer 2

使用display: inline-block; 和max-height