我正在尝试将文字放在/ style中作为我网页的某个部分，但div总是最终也不会失败。
HTML：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>.</title>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="logo.png" width=200px; height=100px; />
</div>
<nav id="nav" ><ul><li><a href="http://www.jukaijuiceco.com/why-juice/">About us</a>   </li>
<li><a href="http://www.jukaijuiceco.com/our-juices/">Locations</a>   </li>
<li><a href="http://www.jukaijuiceco.com/get-juice/">Contact us</a>   </li>
<li><a href="http://www.jukaijuiceco.com/about/">FAQ</a>   </li>
<li><a href="http://www.jukaijuiceco.com/about/">News</a>   </li>
<li><a href="http://www.jukaijuiceco.com/about/">Testemonials</a>   </li>
</ul></nav>
<div id="left-sidebar">
<h4>Flavors</h4>
<p class="desc">(Click on the pictures to learn more!)</p>
<br />
<img class="im" src="aca.jpg" height=100px; width=100px;><span class="desc">Smashmouth Acai™</span>
<br /><br /><br /><br /><br /><br />
<img class="im" src="apple.jpg" height=100px; width=100px;><span class="desc">Apple Attack™</span>
<br /><br /><br /><br /><br /><br />
<img class="im" src="berry.jpg" height=100px; width=100px;><span class="desc">Berry Bomb™</span>
<br /><br /><br /><br /><br /><br />
<img class="im" src="cran.jpg" height=100px; width=100px;><span class="desc">Crushing Cranberry™</span>
<br /><br /><br /><br /><br /><br />
<img class="im" src="mon.jpg" height=100px; width=100px;><span class="desc">Monkey Punch™</span>
</div>
<div class="main">
<p>Hi</p>
</div>
<div id="footer">
<a style="color: black;" href="http://tny.cz/6e848651">Copyright © 2014 Jumpin Juice Inc.</a>
</div>
</div>
</body>
</html>
CSS：
body {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
div {
}
#header{
border-color: lightblue; border-style:solid; border-width:1px;
background-color: lightblue;
clear: both;
width: 100%;
text-align: center;
}
.im{
margin-left: 10px;
float:left;
}
#nav{
font-size: 24px;
border-color: #33CC00; border-style:solid; border-width:1px;
background-color: #33CC00;
clear: both;
width: 100%;
height: 10%;
}
li {
list-style-type: none;
display: inline;
}
ul {
text-align: center;
}
.desc {
vertical-align:top;
text-align: center;
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
}
a {
text-decoration: none;
color: white;
}
a:hover {
text-decoration: underline;
color: white;
}
h4 {
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
font-size: 20px;
text-align: center;
}
#left-sidebar {
display:inline-block;
border-color: #FF9999; border-style:solid; border-width:1px;
background-color: #FF9999;
width: 20%;
}
#footer {
background-color: red;
color: black;
margin-bottom: 0px;
vertical-align:middle;
height: 40px;
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
font-size: 15px;
}
.main {
display: inline;
}
.main p {
display: inline;
}
这会产生以下结果：
http://i.imgur.com/6eZWFVr.png
为什么会发生这种情况，如何修复它以使白色矩形的顶角产生“Hi”？
答案 0 :(得分：1)
从.main中移除display:inline;样式，并向左移动＃左侧边栏。你的#footer风格还需要clear:left;：
#left-sidebar {
display:inline-block;
border-color: #FF9999; border-style:solid; border-width:1px;
background-color: #FF9999;
width: 20%;
float:left;
}
#footer {
background-color: red;
color: black;
margin-bottom: 0px;
vertical-align:middle;
height: 40px;
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
font-size: 15px;
clear:left;
}
.main {
}
检查这个小提琴，看看它是否符合您的要求：http://jsfiddle.net/ebejhrb5/1/
此外，这里有一个很好的资源，主题是创建一个双列CSS布局：http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
答案 1 :(得分：0)
你可以像
那样漂浮它们#left-sidebar {
width: 20%;
float:left;
border-color: #FF9999; border-style:solid; border-width:1px;
background-color: #FF9999;
}
.main {
width:79%;
float:right;
}
* {
margin:0;
padding:0;
}