在CSS中使用position属性
[英]Use of position property in CSS
问题描述
I'm a beginner in CSS and need help with a suggestion. 
我是CSS的初学者，需要帮助提出建议。
I'm working on a project, in which I managed to position container_main right next to container_menu giving the remaining dimension of the screen, giving it relative position and floating it to the right. 我工作的一个项目，在我设法定位container_main旁边container_menu让屏幕的剩余尺寸，赋予其相对位置和它漂浮到右边。 container_menu has a dimension and a fixed position specified. container_menu具有指定的维度和固定位置。
body { font-size: 16px; font-family: 'Open Sans', sans-serif; margin: 0; padding: 0; } .wrapper { width: 100%; height: 100%; position: relative; } /*Contenedor de la barra de navegacion: Columna*/ .container_menu { height: 100%; width: 18rem; /*display: inline-block;*/ position: fixed; background-color: gray; } /*Barra de navelación: Elemento <ul>*/ .container_menu .menu { width: 100%; padding: 0; } .container_menu ul { list-style-type: none; } .container_menu .menu li a{ color: white; display: block; padding: 1rem 1.5rem; background-color: gray; } .container_menu .menu li a:hover { color: white; background-color: black; } .container_main { height: 100%; width: 66.31rem; background-color: black; position: relative; float: right; } p { color: white; background-color: blue; width: 30rem; height: 20rem; border: .7rem solid white;; padding: 5rem; margin: 10rem; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/style.css" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300i,400" rel="stylesheet"> <title>MDN - Mockup</title> </head> <body class="wrapper"> <nav class="container_menu"> <ul class="menu"> <li><a href="#"><i class="fa fa-pencil"></i>Teaching Activities</a></li> <li><a href="#">Web Literacy</a></li> <li><a href="#">Leadership Opportunities</a></li> <li><a href="#">Tools</a></li> <li><a href="#">Comunity</a></li> </ul> </nav> <main class="container_main"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </main> <<footer></footer> </body> </html>
I would like to know if the characteristics I gave the containers are ideal, or if there is a better way to get the same result using other properties. 我想知道我给容器的特性是否理想，或者是否有更好的方法可以使用其他属性获得相同的结果。
Thank you. 谢谢。
1 个解决方案
解决方案1
0 2016-11-23 07:49:55
Looking at your code and requirements I don't see a problem the way you are implementing so my answer is that your implementation is all good and doesn't need any change. 查看您的代码和要求我没有看到您实现的方式存在问题所以我的答案是您的实现都很好并且不需要任何更改。 I used the same method in few of my own sites. 我在自己的几个网站上使用了相同的方法。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.