0

http://imageshack.us/photo/my-images/690/printef.jpg/ 文本超出正文页，我不知道为什么会这样。文本应从蓝线的另一行开始。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="">

    <link rel="stylesheet" type="text/css" href="css/main.css">

    <script type="text/javascript" href=""></script>
    <title> tech </title>
</head>

<body id="skin" style="background-image:url(img/bck.jpg)">
    <div id="root">
        <div id="Meniu_header">
            <div id="top">
                <header id="top_header" style="background-image: url(top.jpg)">
                    <img src="img/200.jpg">
                    <h1 id="h1"> UNDER CONSTRUCTION </h1>
                </header>

                <nav id="meniu">
                        <ul>
                            <li> Acasa </li>
                            <li> Servicii </li>
                            <li> Contact </li>
                        </ul>
                </nav>
            </div>
        </div>

            <div id="test">
                <h2> sajbvljaslblas </h2>
                <p> afjkvbafjlbljabadflblajjlaerbladfblaerjlblae </p>
                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br /><br /><br />
            </div>

            <div id="pagina">           
                <div id="stanga">
                    <div id="optiuni">
                        <ul id="st_optiuni">
                            <li> Aluminiu </li>
                            <li> Plastic </li>
                            <li> Fonta </li>
                            <li> Otel </li>
                        </ul>
                        <div id="st_scris">
                            <p> adbnaeasfbabfa </p>
                            <p> adfbadf fsdbhadad </p>
                            <p> adfbad af afsd </p>
                            <p> a dfbad  </p>
                            <p>  adfba fa fd</p>
                            <p> adfb adf  adfb </p>
                            <p> adfb adfb ad </p>
                        </div>
                    </div>
                </div>


            <div id="dreapta">
            <section id="dr_articole">
                <article>
                    <header>
                        <h2> Titlu </h2>
                        <p class="problema"> This is a long text that it's makeing me problems ..........aaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa </p>
                    </header>
                </article>
            </section>
            </div>
            </div>

        <footer>
            <p id="footer"> Copyright © 2013    </p>
            <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/ro/"><img alt="Licenţa Creative Commons" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-nd/3.0/ro/80x15.png" /></a>.
        </footer>

    </div>

</body>

</html>

而CSS是：

*{
    margin: 0px;
    padding: 0px;
}
header, nav, section, article, footer{
    display: block;
}
body{
    width: 100%;
    display: -webkit-box;
    -webkit-box-pack: center;
}
footer{
    display: -webkit-box;
    -webkit-box-pack: center;
    font-family: Arial, sans-serif;
    font-size: 10px;
    color: #FFFFFF;
}
#skin{
    background-repeat: no-repeat;
    background-attachment: fixed;
}
#root{
    max-width: 1000px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-flex: 1;
    border: 2px solid white;
}
#top{
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
#top_header{
    display: -webkit-box;
    -webkit-box-orient: horizoantal;
    padding: 20px;
}
#h1{
    border: 1px solid red;
    font: 50px bold Arial;
    color: #FFFFFF;
    margin-left: 50px;
}
#meniu{
    color: white;
    display: -webkit-box;
    -webkit-box-orient: horizoantal;
    background: green;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
#meniu li{
    display: inline-block;
    text-decoration: none;
    list-style: none;
    padding: 5px;
    font: bold 17px Tahoma;
}
#test{
    border: 2px solid red;
    width: 800px;
    height: 400px;
    margin-top: 20px;
    margin-left: 100px;
}
#pagina{
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    margin-top: 50px;
    border: 4px solid blue;
}
#stanga{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    border: 3px dashed red;
}
#st_optiuni{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    width: 200px;
    list-style: none;
    padding: 5px 5px 5px 10px;
    margin-top: 50px;
    border-radius: 8px;
    color: #FFFFFF;
    border: 2px solid yellow;
}
#st_scris{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    width: 200px;
    list-style: none;
    padding: 5px 5px 5px 10px;
    margin-top: 50px;
    border-radius: 8px;
    color: #FFFFFF;
    border: 2px solid yellow;
}
#dreapta{
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
#dr_articol{
    -webkit-box-flex: 1;
    border: 1px dashed yellow;
}
.problema{
    color: white;
}
4

3 回答 3

3

word-wrap: break-word;每当容器中出现“不想离开”的单词时，使用这种方式，css 规则就会在新的一行上打破世界。

* 这是一个 CSS3 属性。

更多关于这方面的信息，您可以在 W3C 找到这里的链接。自动换行规范

于 2013-04-08T14:56:21.887 回答
0

一个健康的开始是强制你的父容器是相对的并且在浏览器宽度的范围内。然后将您的一天工作到您似乎超出范围的特定子元素。Google Chrome 的开发者工具是调试此类问题的绝佳资源。

于 2013-04-08T15:03:14.373 回答
0

这是我的第一次尝试，请原谅我的任何错误。

您必须指定容器“div”的宽度，这样里面的元素就不会超出父级的宽度。

以下将是您页面的快速修复：

#dreapta{
    width: 520px;
    padding: 0 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
于 2013-04-08T15:08:29.567 回答