Question

我正在尝试将文字放在/ 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>&emsp;&emsp;&emsp;</li>
    <li><a href="http://www.jukaijuiceco.com/our-juices/">Locations</a>&emsp;&emsp;&emsp;</li>
    <li><a href="http://www.jukaijuiceco.com/get-juice/">Contact us</a>&emsp;&emsp;&emsp;</li>
    <li><a href="http://www.jukaijuiceco.com/about/">FAQ</a>&emsp;&emsp;&emsp;</li>
    <li><a href="http://www.jukaijuiceco.com/about/">News</a>&emsp;&emsp;&emsp;</li>
    <li><a href="http://www.jukaijuiceco.com/about/">Testemonials</a>&emsp;&emsp;&emsp;</li>
    </ul></nav>
    <div id="left-sidebar">
        <h4>Flavors</h4>
        <p class="desc">(Click on the pictures to learn more!)</p>
        <br />
         &nbsp;&nbsp;<img class="im" src="aca.jpg" height=100px; width=100px;><span class="desc">Smashmouth Acai&#0153;</span>
         <br /><br /><br /><br /><br /><br />
         &nbsp;&nbsp;<img class="im" src="apple.jpg" height=100px; width=100px;><span class="desc">Apple Attack&#0153;</span>
         <br /><br /><br /><br /><br /><br />
         &nbsp;&nbsp;<img class="im" src="berry.jpg" height=100px; width=100px;><span class="desc">Berry Bomb&#0153;</span>
          <br /><br /><br /><br /><br /><br />
         &nbsp;&nbsp;<img class="im" src="cran.jpg" height=100px; width=100px;><span class="desc">Crushing Cranberry&#0153;</span>
          <br /><br /><br /><br /><br /><br />
         &nbsp;&nbsp;<img class="im" src="mon.jpg" height=100px; width=100px;><span class="desc">Monkey Punch&#0153;</span>
    </div>

    <div class="main">
    <p>Hi</p>
    </div>

    <div id="footer">
    <a style="color: black;" href="http://tny.cz/6e848651">Copyright &copy; 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”？

Answer 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/

Answer 2

你可以像

那样漂浮它们

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

为什么这篇文章太过分了？（HTML / CSS）

2 个答案:

为什么这篇文章太过分了？ （HTML / CSS）

2 个答案:

为什么这篇文章太过分了？（HTML / CSS）