0

我有一个 DIV，我想用它来显示一些格式化的内容。但是，我在 DIV 中遇到了一些文本标签的问题。您可以在jsfiddle中看到我的问题。你能帮我解决这个问题吗？我需要第二个“列”的内容能够自动换行，当它这样做时，我希望下一个“行”被向下移动，这样它就不会重叠。基本上我想让文本在 DIV 中看起来很正常。

<div class="container-right">
    <div class="topul" style="background-color:#2ecc71; width:352px;"></div>
    <div class="parent" style="min-width:350px; width:350px; height:445px;">
        <p class="myp" style="color:#2ecc71; font-size:2em; margin-bottom:0px"> <b>Worker information</b>

        </p>
        <div class="topul2" style="float:left; background-color:#2ecc71;"></div>
        <div class="d-table">
            <div class="d-tablerow">
                <div class="d-tablecell" style="text-align:right; width:30%">
                    <p class="myp3" style="color:#2ecc71">Name:
                        <p>
                </div>
                <div class="d-tablecell" style="text-align:left; width:70%;">
                    <p class="myp4" style="color:#2ecc71"><b>Some name</b>
                    </p>
                </div>
            </div>
            <div class="d-tablerow">
                <div class="d-tablecell" style="text-align:right; width:30%">
                    <p class="myp3" style="color:#2ecc71;">Address:</p>
                </div>
                <div class="d-tablecell" style="text-align:left; width:70%;">
                    <p class="myp4" style="color:#2ecc71; display:inline-block"><b>Here goes a long text as address that does not word-wrap and exits the DIV</b>
                    </p>
                </div>
            </div>

            <div class="d-tablerow">
                <div class="d-tablecell" style="text-align:right; width:30%">
                    <p class="myp3" style="color:#2ecc71">Other info:</p>
                </div>
                <div class="d-tablecell" style="text-align:left; width:70%;">
                    <p class="myp4" style="color:#2ecc71; "><b>Here is other information</b>
                    </p>
                </div>
            </div>


        </div>
    </div>
</div>

您可以在上面的 jsfiddle 链接中看到 CSS。我放弃了...我是 CSS 和 HTML 的新手，到目前为止，这是我在谷歌上挖掘后手动完成的。但现在我不知道如何解决这个问题。请帮忙。谢谢

4

3 回答 3

3

问题在于您的 .myp4 样式

避免重叠删除高度：2px；

为了避免 div 设置 max-width: 200px;

如上所述，除非您想要特定的外观，否则设定高度有点像噩梦。最好使用 min-height 或 max-height

注意：您应该认真地将所有 CSS 拆分到一个单独的文件中，而不是将它们放在元素中 另外，您使用疯狂的显示是否有特殊原因？您可以通过让一个 div 包裹另外两个向左浮动的 div 轻松实现相同的效果。显示：块；如果你是新手，会给你带来更少的困难。以更少的代码为目标，而不是更多。

于 2013-11-13T21:48:37.463 回答
1

尝试在行和/或单元格上设置最小高度而不是高度。

于 2013-11-13T21:47:02.020 回答
1

表格的宽度是罪魁祸首，它允许它的孩子在你的页面上狂奔。.d-table { 宽度：350px; }

于 2013-11-13T21:50:23.387 回答