我正在制作一个网站,但我有一个问题。当我将文字放入其中时身体内部的div溢出,同时身体的大小是固定的,如图所示。
我无法找到解决方案。
这是我身体的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;
}
请帮帮我......
答案 0 :(得分:0)
'''属性没有有效值(' float')。它必须是“绝对的”,“固定的”#39;或者'亲戚'静态' (默认值),'继承'。为相对'更改它或者只是删除该行。
'浮动'属性只能是“左”,“对”,“没有”等。 (默认值)或'继承',而不是' center'。也删除它。
答案 1 :(得分:0)
我认为这是你的代码
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>
有许多方法可以修复浮动,但这适用于您的场景。
答案 2 :(得分:0)
删除&#39; float:center&#39;和&#39;职位:浮动&#39;来自两个css。
body{
position:relative;
}
#content{
position:absolute;
}
答案 3 :(得分:0)
#content
{
width: 100%;
box-shadow: 0px 0px 25px 2px #000000;
border-radius: 2px;
color: black;
position: float;
display: block;
}
删除margin-left: 5%
并将width:90%
更改为width:100%
选择器中的#content
可以解决您的问题。
答案 4 :(得分:0)
你的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>