Question

我有一个DIV，我想用来显示一些格式化的内容。但是，我在DIV中的一些文本TAG有问题。您可以在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的新手，到目前为止这是我在谷歌上挖掘后手动完成的。但现在我不知道如何解决这个问题。请帮忙。感谢

Answer 1

问题在于.myp4样式

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

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

出血

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

注意：您应该认真地将所有CSS拆分为单独的文件，而不是将它们放在元素中你有没有特别的理由使用疯狂的显示器？你可以通过div包装另外两个浮动左边的div来轻松实现同样的效果。显示：块;如果你是新手，会给你带来更少的困难。瞄准更少的代码，而不是更多。

Answer 2

尝试在行和/或单元格上设置min-height而不是height。

Answer 3

桌子的宽度是罪魁祸首，它让孩子们在你的页面上疯狂奔跑。 .d-table { 宽度：350px; }

CSS DIV自动换行问题

3 个答案: