html - DIV 不适合 body

Question

我正在制作一个网站，但我遇到了一个问题。当我将文本放入 body 的大小固定时，body 内的 div 溢出，如图所示。

我找不到解决方案。

这是我 body 的CSS

    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的css

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

请帮帮我...

Answer 1

我认为这是你的代码

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;
}

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

p {
	float: left;
}

<div id="content">
	<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.
		
		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.
		
		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.
		
		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.
		
		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. 
	</p>
</div>

将 .clear 添加到您的代码中。见下文，这是固定版本

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;
}

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

p {
	float: left;
}

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

<div id="content">
	<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.
		
		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.
		
		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.
		
		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.
		
		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. 
	</p>
	<div class="clear"></div>
</div>

有很多方法可以修复 float ，但这是针对您的情况。