左，右和中间内容位置

Question

i must use css to alter the positions; 我必须使用CSS更改职位； the only thing that seems to be working is the right position nav bar and the liquid layout, but the "content" and "right navigation bar" is ot being positioned properly. 唯一似乎起作用的是正确的位置导航栏和液体布局，但是“内容”和“正确的导航栏”必须正确放置。 I want content to be in the middle, leftnavigation on the left, and right navigation on the right. 我希望内容位于中间，左侧导航在左侧，右侧导航在右侧。

<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

You could try this: 您可以尝试以下方法：

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

Here's a live demo of the example - EXAMPLE 这是该示例的现场演示- 示例

Answer 2

There are some errors in your HTML and CSS that need to be addressed before changing the styles to accomplish what you need. 在更改样式以完成所需的操作之前，需要解决HTML和CSS中的一些错误。

In your HTML, there are still some unclosed tags. 在您的HTML中，仍然有一些未关闭的标签。 Especially the <div id="rightnavigation"> tag is never closed, so styles applied to #rightnavigation are actually applied to the entire page. 特别是<div id="rightnavigation">标记永远不会关闭，因此应用于#rightnavigation样式实际上会应用于整个页面。
In your CSS, you apply a style to div.content . 在CSS中，您将样式应用于div.content 。 But that div has an id of content , not a class . 但是那个div有一个content ID ，而不是一个类。 The identifier should be div#content . 标识符应为div#content 。
In your CSS, you give the div with id leftnavigation a position of "left". 在CSS中，将ID为leftnavigation的div的位置设置为“ left”。 This should be "absolute" instead. 相反，这应该是“绝对的”。
Once that is all cleaned up, the left nav is on the left, the content is in the center, and the right nav is on the right. 清理完毕后，左侧导航栏位于左侧，内容位于中心，右侧导航栏位于右侧。 But the center content overlaps the right nav (I assume that is unwanted behavior). 但是中心内容与正确的导航重叠（我认为这是不想要的行为）。 To clean that up, without changing the HTML any more, you need to give your sections widths, and set their positions based on the width of their neighboring elements. 要清理它，而无需再更改HTML，您需要给各节指定宽度，并根据其相邻元素的宽度设置其位置。

Your 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>

And your CSS: 还有你的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;
}

左，右和中间内容位置

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-09-22 15:59:29

解决方案2
0 2015-09-22 16:25:46

左，右和中间内容位置

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-09-22 15:59:29

解决方案2 0 2015-09-22 16:25:46

解决方案1
1 已采纳 2015-09-22 15:59:29

解决方案2
0 2015-09-22 16:25:46