gpt4 book ai didi

html - 左、右和中间内容位置

转载 作者:太空宇宙 更新时间:2023-11-04 11:21:41 24 4
gpt4 key购买 nike

我必须使用 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>

最佳答案

你可以试试这个:

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

关于html - 左、右和中间内容位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32721189/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com