DIV不适合身体

Question

我正在做一个网站，但我有一个问题。当我把文本放进去时，身体内的div溢出，而身体的大小是固定的，如图中所示。

我无法找到解决方案。

这里是我的身体

body 
    { 
    margin-top: -20px; 
    width: 75%; 
    margin-left: 12.5%; 
    float:center; 
    box-shadow: 0px 0px 25px 10px #0000ff; 
    background: url("images/bg.png"); 
    color: #ffffff; 
    position: float; 
    } 

而且DIV

#content 
    { 
    width: 90%; 
    margin-left: 5%; 
    box-shadow: 0px 0px 25px 2px #000000; 
    border-radius: 2px; 
    color: black; 
    position: float; 
    display: block; 
    } 

请帮我的CSS的CSS ...

Answer 1

我觉得这是你的代码

body { 
 
\t margin-top: -20px; 
 
\t width: 75%; 
 
\t margin-left: 12.5%; 
 
\t float: center; 
 
\t box-shadow: 0px 0px 25px 10px #0000ff; 
 
\t background: url("images/bg.png"); 
 
\t color: #ffffff; 
 
\t position: float; 
 
} 
 

 
#content { 
 
\t width: 90%; 
 
\t margin-left: 5%; 
 
\t box-shadow: 0px 0px 25px 2px #000000; 
 
\t border-radius: 2px; 
 
\t color: black; 
 
\t position: float; 
 
\t display: block; 
 
    padding: 20px; 
 
} 
 

 
p { 
 
\t float: left; 
 
}

<div id="content"> 
 
\t <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero congue euismod sodales. Aenean porta neque quis enim sagittis, ac elementum erat tristique. Suspendisse laoreet tincidunt diam, vitae convallis nisl euismod nec. Suspendisse non sodales justo, sed laoreet libero. Vestibulum porta mi eu dui fermentum sollicitudin. Pellentesque et enim tincidunt, luctus magna in, scelerisque tellus. Sed sed nunc lectus. Sed sed dui ut libero finibus luctus et nec nulla. 
 
\t \t 
 
\t \t In hac habitasse platea dictumst. Ut ac vulputate sem. Vivamus suscipit mauris libero, a ullamcorper est malesuada eget. Morbi at condimentum eros. Maecenas pulvinar tellus vitae leo dignissim iaculis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin fermentum ultrices nisi, sit amet tincidunt ligula aliquet dapibus. Aliquam convallis enim diam, id mollis nisi aliquet bibendum. Mauris lorem eros, sollicitudin a enim ac, sagittis porttitor velit. Nullam mollis, nunc ac egestas sollicitudin, odio dolor placerat tellus, quis vulputate justo justo quis massa. Integer purus nulla, condimentum eu nibh ac, vehicula imperdiet magna. 
 
\t \t 
 
\t \t Donec mattis libero justo, ac blandit ipsum facilisis eu. Maecenas id justo lobortis, molestie nibh non, mollis odio. Duis quis finibus neque, at laoreet est. Suspendisse ornare libero justo, sit amet rutrum ex ultrices non. Vivamus in metus blandit, malesuada massa at, tempus odio. Quisque maximus viverra sapien ac sodales. In hac habitasse platea dictumst. Aenean aliquam iaculis risus, sit amet rutrum ipsum venenatis sit amet. Vestibulum sollicitudin facilisis pulvinar. 
 
\t \t 
 
\t \t Proin finibus blandit ante, vitae sagittis leo ullamcorper eget. Pellentesque imperdiet nisi venenatis posuere condimentum. Mauris dictum metus porttitor neque sollicitudin sodales eget nec ex. Nam posuere nunc vitae tincidunt interdum. Fusce egestas eros erat. Donec est libero, pharetra vel vestibulum et, porttitor quis justo. Sed iaculis turpis lectus, ut imperdiet diam cursus in. 
 
\t \t 
 
\t \t Pellentesque id mi nisl. Suspendisse non lobortis massa. In gravida ultrices libero a congue. Proin eget placerat nunc, iaculis accumsan arcu. Maecenas vehicula mattis massa, at tincidunt ligula porta quis. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu convallis tellus. Aliquam nec semper turpis. Nulla congue ultricies lacus ac feugiat. Vestibulum augue tellus, sodales quis aliquet non, sagittis at elit. 
 
\t </p> 
 
</div>

添加.clear到您的代码。在下面看到，这里的固定版本

body { 
 
\t margin-top: -20px; 
 
\t width: 75%; 
 
\t margin-left: 12.5%; 
 
\t float: center; 
 
\t box-shadow: 0px 0px 25px 10px #0000ff; 
 
\t background: url("images/bg.png"); 
 
\t color: #ffffff; 
 
\t position: float; 
 
} 
 

 
#content { 
 
\t width: 90%; 
 
\t margin-left: 5%; 
 
\t box-shadow: 0px 0px 25px 2px #000000; 
 
\t border-radius: 2px; 
 
\t color: black; 
 
\t position: float; 
 
\t display: block; 
 
    padding: 20px; 
 
} 
 

 
p { 
 
\t float: left; 
 
} 
 

 
.clear:after { 
 
\t content: ''; 
 
\t clear: both; 
 
\t display: table; 
 
}

<div id="content"> 
 
\t <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero congue euismod sodales. Aenean porta neque quis enim sagittis, ac elementum erat tristique. Suspendisse laoreet tincidunt diam, vitae convallis nisl euismod nec. Suspendisse non sodales justo, sed laoreet libero. Vestibulum porta mi eu dui fermentum sollicitudin. Pellentesque et enim tincidunt, luctus magna in, scelerisque tellus. Sed sed nunc lectus. Sed sed dui ut libero finibus luctus et nec nulla. 
 
\t \t 
 
\t \t In hac habitasse platea dictumst. Ut ac vulputate sem. Vivamus suscipit mauris libero, a ullamcorper est malesuada eget. Morbi at condimentum eros. Maecenas pulvinar tellus vitae leo dignissim iaculis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin fermentum ultrices nisi, sit amet tincidunt ligula aliquet dapibus. Aliquam convallis enim diam, id mollis nisi aliquet bibendum. Mauris lorem eros, sollicitudin a enim ac, sagittis porttitor velit. Nullam mollis, nunc ac egestas sollicitudin, odio dolor placerat tellus, quis vulputate justo justo quis massa. Integer purus nulla, condimentum eu nibh ac, vehicula imperdiet magna. 
 
\t \t 
 
\t \t Donec mattis libero justo, ac blandit ipsum facilisis eu. Maecenas id justo lobortis, molestie nibh non, mollis odio. Duis quis finibus neque, at laoreet est. Suspendisse ornare libero justo, sit amet rutrum ex ultrices non. Vivamus in metus blandit, malesuada massa at, tempus odio. Quisque maximus viverra sapien ac sodales. In hac habitasse platea dictumst. Aenean aliquam iaculis risus, sit amet rutrum ipsum venenatis sit amet. Vestibulum sollicitudin facilisis pulvinar. 
 
\t \t 
 
\t \t Proin finibus blandit ante, vitae sagittis leo ullamcorper eget. Pellentesque imperdiet nisi venenatis posuere condimentum. Mauris dictum metus porttitor neque sollicitudin sodales eget nec ex. Nam posuere nunc vitae tincidunt interdum. Fusce egestas eros erat. Donec est libero, pharetra vel vestibulum et, porttitor quis justo. Sed iaculis turpis lectus, ut imperdiet diam cursus in. 
 
\t \t 
 
\t \t Pellentesque id mi nisl. Suspendisse non lobortis massa. In gravida ultrices libero a congue. Proin eget placerat nunc, iaculis accumsan arcu. Maecenas vehicula mattis massa, at tincidunt ligula porta quis. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu convallis tellus. Aliquam nec semper turpis. Nulla congue ultricies lacus ac feugiat. Vestibulum augue tellus, sodales quis aliquet non, sagittis at elit. 
 
\t </p> 
 
\t <div class="clear"></div> 
 
</div>

有很多的方法来解决浮动，但是这是为您的方案。

Answer 2

的 '位置' 属性还没有一个有效的值（'float'）。它必须是“绝对”，“固定”或“相对”，“静态”（默认值），“继承”。将其更改为'相对'或只删除该行。

'float'属性可以是'left'，'right'，'none'（默认值）或'inherit'，而不是'center'。也删除它。

Answer 3

从两个css中删除'float：center'和'position：float'。

body{ 
    position:relative; 
} 

#content{ 
    position:absolute; 
} 

Answer 4

#content 
    { 
    width: 100%; 
    box-shadow: 0px 0px 25px 2px #000000; 
    border-radius: 2px; 
    color: black; 
    position: float; 
    display: block; 
    } 

删除margin-left: 5%并在#content选择改变width:90%到width:100%解决您的问题。

Answer 5

您的CSS代码不是非常优化！我总是尽量避免使用位置。

看看这个片断：

body{ 
 
    background-image: url(http://images.eurogamer.net/2013/articles/1/6/8/5/9/9/8/digitalfoundry-2014-battlefield-hardline-beta-performance-analysis-1402591929444.jpg); 
 
    padding-top:30px; 
 
} 
 

 
.content, .footer{ 
 
    width:760px; 
 
    background-color: #fff; 
 
    margin:0 auto; 
 
    padding:20px; 
 
    border: 10px solid blue; 
 
    margin-bottom:20px; 
 
} 
 
.footer{ 
 
    background-color: #fff; 
 
    padding:5px 20px; 
 
    text-align:center; 
 
} 
 
.footer p{font-weight:bold;font-size:14px;}

<body> 
 
    <div class="content"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus sapien nec finibus tempus. Nulla quam lectus, tincidunt non mattis vel, aliquet at augue. Nullam sit amet mi dui. Pellentesque interdum nibh non pulvinar vehicula. In hac habitasse platea dictumst. Aenean et risus elit. Aenean mauris mauris, molestie at fermentum vitae, finibus at elit. Integer posuere felis eu lacus laoreet iaculis. Pellentesque in turpis in augue lacinia placerat. Donec ipsum tortor, porta quis justo quis, ultricies bibendum ex. Proin quis purus ut ante mattis feugiat id ac elit. Aenean lacinia mattis congue. Etiam sit amet vehicula sem. 
 

 
Vestibulum molestie quis nulla sed dapibus. Mauris a arcu vitae lacus pulvinar gravida. Vestibulum eget interdum arcu. Sed sodales nec libero sed fermentum. Integer vulputate massa sit amet ipsum accumsan euismod. Donec facilisis laoreet velit, eget blandit tellus auctor quis. In volutpat tincidunt justo et cursus. Mauris a sollicitudin diam. Morbi euismod mi sit amet elit dignissim, sit amet porta nibh vehicula. Nunc iaculis scelerisque volutpat. Nullam porttitor quam nec dolor vestibulum lacinia. 
 

 
Phasellus gravida vel tellus ac tempus. Duis volutpat ut neque vitae mattis. Cras sed quam vel nunc molestie sollicitudin. In tristique pellentesque dolor, vel elementum nibh volutpat a. Aliquam sit amet vehicula sapien, non convallis ipsum. Fusce commodo, libero a euismod cursus, libero odio faucibus leo, ut accumsan ligula risus eget massa. Aliquam egestas, arcu eu viverra pulvinar, massa nunc mattis neque, eget ultrices tellus libero ac nulla. Aenean viverra condimentum mauris imperdiet mattis. Mauris vitae turpis a libero consequat euismod. Quisque sollicitudin feugiat sagittis. Vestibulum gravida sit amet velit nec egestas. 
 

 
Maecenas id arcu eu nisi dapibus porta. Morbi vel nulla et purus facilisis commodo porta eu ante. Mauris efficitur gravida elit, ac rutrum arcu vestibulum sed. Curabitur non justo vitae lacus tincidunt suscipit id et nulla. Nam quam nisi, consequat quis suscipit et, cursus quis magna. Aliquam interdum porttitor odio, ut dictum est accumsan ac. Vestibulum venenatis vestibulum molestie. Proin at diam non nisl euismod congue tincidunt at elit. Nullam pellentesque ante eu vestibulum molestie. Donec condimentum sed nunc quis posuere. Maecenas et dolor et velit malesuada dignissim. 
 

 
Nullam vehicula ante non quam cursus, at facilisis est gravida. Suspendisse potenti. Duis tempor convallis pellentesque. Sed at iaculis elit, et iaculis ipsum. Mauris porta accumsan justo, sed dignissim neque sodales a. In ullamcorper a dolor ut scelerisque. Suspendisse mollis arcu euismod, convallis libero nec, rutrum diam. Pellentesque at rhoncus nisi, eget posuere lorem. 
 
    
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus sapien nec finibus tempus. Nulla quam lectus, tincidunt non mattis vel, aliquet at augue. Nullam sit amet mi dui. Pellentesque interdum nibh non pulvinar vehicula. In hac habitasse platea dictumst. Aenean et risus elit. Aenean mauris mauris, molestie at fermentum vitae, finibus at elit. Integer posuere felis eu lacus laoreet iaculis. Pellentesque in turpis in augue lacinia placerat. Donec ipsum tortor, porta quis justo quis, ultricies bibendum ex. Proin quis purus ut ante mattis feugiat id ac elit. Aenean lacinia mattis congue. Etiam sit amet vehicula sem. 
 

 
Vestibulum molestie quis nulla sed dapibus. Mauris a arcu vitae lacus pulvinar gravida. Vestibulum eget interdum arcu. Sed sodales nec libero sed fermentum. Integer vulputate massa sit amet ipsum accumsan euismod. Donec facilisis laoreet velit, eget blandit tellus auctor quis. In volutpat tincidunt justo et cursus. Mauris a sollicitudin diam. Morbi euismod mi sit amet elit dignissim, sit amet porta nibh vehicula. Nunc iaculis scelerisque volutpat. Nullam porttitor quam nec dolor vestibulum lacinia. 
 

 
Phasellus gravida vel tellus ac tempus. Duis volutpat ut neque vitae mattis. Cras sed quam vel nunc molestie sollicitudin. In tristique pellentesque dolor, vel elementum nibh volutpat a. Aliquam sit amet vehicula sapien, non convallis ipsum. Fusce commodo, libero a euismod cursus, libero odio faucibus leo, ut accumsan ligula risus eget massa. Aliquam egestas, arcu eu viverra pulvinar, massa nunc mattis neque, eget ultrices tellus libero ac nulla. Aenean viverra condimentum mauris imperdiet mattis. Mauris vitae turpis a libero consequat euismod. Quisque sollicitudin feugiat sagittis. Vestibulum gravida sit amet velit nec egestas. 
 

 
Maecenas id arcu eu nisi dapibus porta. Morbi vel nulla et purus facilisis commodo porta eu ante. Mauris efficitur gravida elit, ac rutrum arcu vestibulum sed. Curabitur non justo vitae lacus tincidunt suscipit id et nulla. Nam quam nisi, consequat quis suscipit et, cursus quis magna. Aliquam interdum porttitor odio, ut dictum est accumsan ac. Vestibulum venenatis vestibulum molestie. Proin at diam non nisl euismod congue tincidunt at elit. Nullam pellentesque ante eu vestibulum molestie. Donec condimentum sed nunc quis posuere. Maecenas et dolor et velit malesuada dignissim. 
 

 
Nullam vehicula ante non quam cursus, at facilisis est gravida. Suspendisse potenti. Duis tempor convallis pellentesque. Sed at iaculis elit, et iaculis ipsum. Mauris porta accumsan justo, sed dignissim neque sodales a. In ullamcorper a dolor ut scelerisque. Suspendisse mollis arcu euismod, convallis libero nec, rutrum diam. Pellentesque at rhoncus nisi, eget posuere lorem. 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus sapien nec finibus tempus. Nulla quam lectus, tincidunt non mattis vel, aliquet at augue. Nullam sit amet mi dui. Pellentesque interdum nibh non pulvinar vehicula. In hac habitasse platea dictumst. Aenean et risus elit. Aenean mauris mauris, molestie at fermentum vitae, finibus at elit. Integer posuere felis eu lacus laoreet iaculis. Pellentesque in turpis in augue lacinia placerat. Donec ipsum tortor, porta quis justo quis, ultricies bibendum ex. Proin quis purus ut ante mattis feugiat id ac elit. Aenean lacinia mattis congue. Etiam sit amet vehicula sem. 
 

 
Vestibulum molestie quis nulla sed dapibus. Mauris a arcu vitae lacus pulvinar gravida. Vestibulum eget interdum arcu. Sed sodales nec libero sed fermentum. Integer vulputate massa sit amet ipsum accumsan euismod. Donec facilisis laoreet velit, eget blandit tellus auctor quis. In volutpat tincidunt justo et cursus. Mauris a sollicitudin diam. Morbi euismod mi sit amet elit dignissim, sit amet porta nibh vehicula. Nunc iaculis scelerisque volutpat. Nullam porttitor quam nec dolor vestibulum lacinia. 
 

 
Phasellus gravida vel tellus ac tempus. Duis volutpat ut neque vitae mattis. Cras sed quam vel nunc molestie sollicitudin. In tristique pellentesque dolor, vel elementum nibh volutpat a. Aliquam sit amet vehicula sapien, non convallis ipsum. Fusce commodo, libero a euismod cursus, libero odio faucibus leo, ut accumsan ligula risus eget massa. Aliquam egestas, arcu eu viverra pulvinar, massa nunc mattis neque, eget ultrices tellus libero ac nulla. Aenean viverra condimentum mauris imperdiet mattis. Mauris vitae turpis a libero consequat euismod. Quisque sollicitudin feugiat sagittis. Vestibulum gravida sit amet velit nec egestas. 
 

 
Maecenas id arcu eu nisi dapibus porta. Morbi vel nulla et purus facilisis commodo porta eu ante. Mauris efficitur gravida elit, ac rutrum arcu vestibulum sed. Curabitur non justo vitae lacus tincidunt suscipit id et nulla. Nam quam nisi, consequat quis suscipit et, cursus quis magna. Aliquam interdum porttitor odio, ut dictum est accumsan ac. Vestibulum venenatis vestibulum molestie. Proin at diam non nisl euismod congue tincidunt at elit. Nullam pellentesque ante eu vestibulum molestie. Donec condimentum sed nunc quis posuere. Maecenas et dolor et velit malesuada dignissim. 
 

 
Nullam vehicula ante non quam cursus, at facilisis est gravida. Suspendisse potenti. Duis tempor convallis pellentesque. Sed at iaculis elit, et iaculis ipsum. Mauris porta accumsan justo, sed dignissim neque sodales a. In ullamcorper a dolor ut scelerisque. Suspendisse mollis arcu euismod, convallis libero nec, rutrum diam. Pellentesque at rhoncus nisi, eget posuere lorem. 
 
    </div> 
 
    <div class="footer"> 
 
     <p>Copyright 2015 </p> 
 
    </div> 
 
</body>

我想这是你想要的。