Question

我是网页设计的自学者，所以我可能会错过一些基础知识编码。

所以问题是

内容在一行中超出右边的div。

以下代码

HTML

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">

    <title></title>
</head>

<body>
    <div id="bg">
        <div id="mainwrapper">
            <div id="header">
                <div id="logo"></div>
            </div>

            <div id="contentwrapper">
                <div id="leftwrapper">
                    <div id="contentspacing">
                        <div id="content">
                            <p>
                                asdfasdfasdfasdvvasdvasdvasdvfasdvsdasdas 
                                dfasdfasdfasdvvasdvasdvasdvfasdvsdasdasdfasdfas
                            </p>
                        </div>
                    </div>
                </div>

                <div id="rightwrapper">
                    asdfasdf
                </div>
            </div>
        </div>
    </div>
</body>
</html>

以下的CSS

/* ---------------------------------------------------------------*/
/* --------------------->  RESET  <<<-------------------------*/
/* ---------------------------------------------------------------*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

body {
line-height:1;
}

body {
font-family:Arial,sans-serif;
font-size:100%;
line-height:1.3em;
_font-size:16px;
color:#504e45;
background:#ebe9e1 url(pics/bg.jpg) top left repeat-x;
}

#bg {
float:left;
display:block;
height:600px;
width:100%;
background:url(pics/hotel-bg.jpg) top center no-repeat;
margin:0 0 0 0;
}

#mainwrapper {
float:left;
display:block;
width:1000px;
margin:0 auto;
}

#header {
float:left;
display:block;
}

#logo {
width:274px;
height:44px;
background:url(pics/logo.png) no-repeat;
margin:50 0 0 100;
}

p {
float:left;
display:inline-block;
line-height:1.7em;
margin:1em 0;
-webkit-margin-before:1em;
-webkit-margin-after:1em;
-webkit-margin-start:0px;
-webkit-margin-end:0px;
}

#contentwrapper {
float:left;
display:block;
width:1000px;
}

#leftwrapper {
float:left;
display:block;
width:593px;
}

#contentspacing {
float:left;
display:block;
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

#content {
float:left;
display:block;
height:auto;
width:593px;
border:1px solid #bdc9f4;
background:url(pics/bg2.png) top left repeat-x;
margin:35 120;
}

#rightwrapper {
float:left;
display:block;
}

Answer 1

将word-wrap: break-word; word-break: break-all;添加到#content

在这里演示http://jsfiddle.net/ZK6yR/

Answer 2

当您使用相当长的单词时会发生这种情况。试试这个：

word-wrap: no-break;

div内容溢出，内联块无用

2 个答案: