Question

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

$(':radio').on('change', function() {
    $('#ddlCompare1').val( this.value );
})
.filter(':checked').change();

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的{strong> id 为content，而不是类。标识符应为div#content。
在您的CSS中，您为身份div的{{1}}提供＆＃34;左＆＃34;的位置。这应该是绝对的＆＃34;代替。
一旦清理完毕，左侧导航栏位于左侧，内容位于中间位置，右侧导航栏位于右侧。但是中心内容与右侧导航重叠（我认为这是不需要的行为）。要清理它，而不再更改HTML，你需要给你的部分宽度，并根据它们相邻元素的宽度设置它们的位置。

您的HTML：

leftnavigation

你的CSS：

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

左，右和中间内容位置

2 个答案: