左、右和中间内容位置答案

【问题标题】：left, right, and middle content position左、右和中间内容位置
【发布时间】：2015-09-22 15:41:05
【问题描述】：

我必须使用 css 来改变位置；唯一似乎起作用的是正确的位置导航栏和液体布局，但“内容”和“右导航栏”的位置不正确。我希望内容位于中间，左侧导航位于左侧，右侧导航位于右侧。

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

【问题讨论】：

你需要先清理你的 HTML - 那里有很多未关闭（甚至未打开）的标签。我可以猜测您的意图，但是对于代码的当前状态来说这有点困难。请清理 HTML 并重新发布
同意 - 我已为您将其放入堆栈 sn-p。请确保您在此处发布的代码是一个最小的示例，可以清楚地展示您遇到的问题。这将使我们更容易提供帮助。你不需要包含<html> 或<head> 标签，或者任何进入头部的东西。所以我删除了这些东西。但我会提到头部内的元标记无效（缺少大于符号的结束符）。
好的，我会清理代码

标签： html css panel navigationbar

【解决方案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

【讨论】：

【解决方案2】：

您的 HTML 和 CSS 中有一些错误需要解决，然后才能更改样式以完成您需要的操作。

在您的 HTML 中，仍有一些未闭合的标签。尤其是<div id="rightnavigation"> 标签永远不会关闭，因此应用于#rightnavigation 的样式实际上会应用于整个页面。
在 CSS 中，将样式应用于 div.content。但该 div 的 id 为 content，而不是 class。标识符应为div#content。
在您的 CSS 中，您将 ID 为 leftnavigation 的 div 指定为“左”位置。这应该是“绝对的”。
全部清理后，左侧导航在左侧，内容在中间，右侧导航在右侧。但是中心内容与正确的导航重叠（我认为这是不需要的行为）。要清理它，无需再更改 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;
}

【讨论】：