Question

我是html和CSS的新手，最后经过一些工作我设法创建了一个布局，其中包括菜单（绿色部分），一些文本内容（黄色部分）。但不幸的是，我不能放置任何内容，我希望它是。我不知道我做错了什么。我为内容创建了div，名为obsah，我不能把它放在panelcontent中......有人可以给我建议吗？

＆＃13;

body {
	text-align: center;
 	background-image: url(pattern_background_by_keyshabc-d6r3ots.jpg);
}

header {
background-color: black;
	height: 80px;
	width: 100%;}


#wrapper{
margin-left: 10%;
margin-right: 10%;
width: 80%;
height: 100px;}

#panelcontent {
  	float: left;
	height: 100%;
	background-color: yellow;
	width: 100%;
	
}
#panelmenu {
	float: left;
	width: 15%;
	height: 100%;
	background-color: lime;
	margin-left:auto;
	margin-right:auto;


}

#footer {
	float: left;
	height: 20px;
	width: 100%;
	background-color: red;	 
}

#obsah {
	position: relative;
	left: 20%; 
	width: 50%;
	
}

＆＃13;

<!DOCTYPE html>
<html lang="cs">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
  <header></header>
  <div id="wrapper">
  <div id="panelcontent">
  <div id="panelmenu">
  <nav></nav>
  <div id="obsah">
  <article> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. In dapibus augue non sapien. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Aliquam in lorem sit amet leo accumsan lacinia. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Mauris tincidunt sem sed arcu. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Fusce tellus. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Praesent vitae arcu tempor neque lacinia pretium. Sed ac dolor sit amet purus malesuada congue. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. In convallis. Mauris metus. Praesent id justo in neque elementum ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quis nibh at felis congue commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.

In enim a arcu imperdiet malesuada. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Pellentesque sapien. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Mauris elementum mauris vitae tortor. Praesent in mauris eu tortor porttitor accumsan. Nullam eget nisl. Mauris elementum mauris vitae tortor. Integer tempor. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. In convallis.</article>
  </div>
  </div>
  </div>
  <div id="footer">
  <footer></footer>
  </div>
  </div>
  

  
    <!-- page content -->
  </body>
</html>

＆＃13;

Answer 1

好的，这是你想要的布局的小提琴： https://jsfiddle.net/mkarajohn/opfhzm0k/1/

我将#obsah元素移动到与#panelmenu相同的级别，然后更改了以下CSS

#panelcontent {
  height: 100%;
  background-color: yellow;
  width: 100%;
  /** Added `position: relative` to `#panelcontent` in order **/
  /** to be able to position the `#panelmenu` absolute later **/
  position: relative;
}

#panelmenu {
  width: 15%;
  background-color: lime;

  /** Here we position this element absolutely **/
  /** and we make it to have the full height of its parent by applying **/
  /** top: 0 and bottom:0 **/
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

#obsah {
  position: relative;
  /** left a left margin that is equal to the width of #panelmenu **/
  margin-left: 15%;
  padding: 0 1rem;
}

HTML - 相对定位，放置内容

1 个答案: