左、右和中间内容位置

Question

我必须使用css来改变位置；唯一似乎起作用的是正确的位置导航栏和流式布局，但 "content" 和 "right navigation bar" 未正确定位。我希望content在中间，leftnavigation在左边，right navigation在右边。

<title>CSS liquid layout</title>


 <style type="text/css">

.due {
color: #ff0000;
font-weight: bold;
}

#leftnavigation{
position:absolute;
left:10px;
top:10px;
width:250px;
}

#rightnavigation {
float:right;
width:250px;
height:800px;
} 
#content {
float:center;

}
    </style>
</head>
<body leftmargin="0" topmargin="0" bgcolor="#ccff99">
    <div id="app">
        <div id="rightnavigation">
            <h1>Right Navigation</h1>
            <a href="http://www,google.com">link</a> <a href="http://www,google.com">Instructor</a>
            <a href="http://www,google.com">Course</a> <a href="http://www,google.com">
                Resume
                project
            </a>
        </div>
        <div id="content">
            <h1>Sample Content</h1>
            <p>
                This is the content section of the page. Use structural markup
                like &lt;p&gt;&lt;/p&gt;
                to keep the page valid in XHTML.
            </p>
            <h2>Lorem Ipsum</h2>
        </div>
        <div id="leftnavigation">
            <h1>Left Navigation</h1>
            <p>
                <a href="http://www,google.com">Page 1</a> <a href="http://www,google.com">Page 2</a> <a href="http://www,google.com">
                    Page
                    3
                </a> <a href="http://www,google.com">Page 4</a> <a href="http://www,google.com">Page 5</a> <br />
                Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor
                amum.
            </p>
            <h2>Lorem Ipsum</h2>
        </div>
    </div>

Answer 1

你可以试试这个：

CSS

.app {
    width: 100%
    height: 100%;
}

.due {color: #ff0000;
font-weight: bold;
}

#rightnavigation {
      float: left;
      width: 33.333%  
} 

#leftnavigation{
    float: left;
     width: 33.333%

}

#content {
   float: left;
    width: 33.333%;
}

HTML

<div class="app">

    <div id="leftnavigation">
        <h1> Left Navigation </h1>
    </div>

     <div id="content"></div>

      <div id="rightnavigation"> 
        <h1>Right Navigation</h1>
    </div>

</div>

这是示例的现场演示 - EXAMPLE

Answer 2

您的 HTML 和 CSS 中存在一些错误，需要在更改样式以完成所需内容之前解决。

在您的HTML中，还有一些未关闭的标签。特别是 <div id="rightnavigation"> 标签永远不会关闭，所以应用于 #rightnavigation 的样式实际上应用于整个页面。
在您的 CSS 中，您将样式应用于 div.content。但是 div 的 id 为 content，而不是 class。标识符应为 div#content.
在您的 CSS 中，您将 ID 为 leftnavigation 的 div 的位置设为 "left"。这应该是 "absolute"。
全部清理完后，左边的导航在左边，内容在中间，右边的导航在右边。但是中心内容与正确的导航重叠（我认为这是不受欢迎的行为）。要清理它，无需再更改 HTML，您需要给您的部分宽度，并根据相邻元素的宽度设置它们的位置。

你的HTML：

<div id="rightnavigation"> 
    <h1>Right Navigation</h1>
</div>
<div id="content">
    <h1>Sample Content</h1>
    <p>This is the content section of the page. Use structural markup
    like &lt;p&gt;&lt;/p&gt;
    to keep the page valid in XHTML.</p>
    <p>The styled document should  look like your printed version/screenshot.  
    Add styles to the left navigation links to give them borders and a 
    background color that changes when moused over (hint: Define navigation 
    links as display:block;). For the right side links, use a different 
    background color change and border as ashown.  
    Make the center column "liquid" or "elastic." Use an external (linked) 
    CSS file. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. 
    Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit 
    dolor amum. 
    Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. </p>

    <h2>Lorem Ipsum</h2>
    <p> Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. 
    Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. 
    Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. </p>
    <p><span class="due">Due Tuesday, September 22.</span> Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. 
    Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. 
    Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. </p>
</div>
<div id="leftnavigation"> 
    <h1>Left Navigation</h1> 
    <p><br>Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. </p>
    <h2>Lorem Ipsum</h2>
</div>

还有你的CSS：

#rightnavigation {
    position: absolute;
    top: 50px;
    right: 0px;
    width: 25%;
} 

#content {
    position: absolute;
    top: 50px;
    left: 25%;
    width: 50%;
}

#leftnavigation{
    position: absolute;
    top: 50px;
    left: 0px;
    width: 25%;
}

.due {
    color: #ff0000;
    font-weight: bold;
}

左、右和中间内容位置

left, right, and middle content position

html

css

panel

navigationbar