时间戳

首页 > 解决方案 > 如何相对于其容器调整项目的大小和位置

html - 如何相对于其容器调整项目的大小和位置

问题描述

我对 HTML 完全陌生，我想相对于其容器定位和调整项目的大小。我复制了这段代码（https://codepen.io/Tectonics0x3F/pen/EfAgr），如果我将顶部和左侧的百分比更改为 25% 和 25%，例如，盒子在容器顶部下方 25% 处，并且如果我改变高度和宽度，在正确的方向上增加 25%，与盒子的大小相同，盒子的高度为容器高度的 25%，宽度为容器长度的 25%。但是，如果我在我的代码中这样做，那么 Boxes 和 Container 就会随处可见。我认为问题在于盒子并不真正在容器中，但我不知道该怎么做。如果你需要知道这一点，我想知道，但我想做的是一个带有容器中这些框的菜单。提前感谢您的帮助，并为我的英语不好感到抱歉。

我的代码

   body{
  background-image:url('../images/bg24.jpg');
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size:16px;
  line-height: 1.6em;
  margin:0;
  background-repeat:repeat; 
  margin: auto;
}


#container {
  height:70%;
  width:90%;
  margin:auto;
  top:25%;
  left:5%;
  border: 5px solid white;
  position:relative;
}



.button {
      background-color: #474B4F;  
      border: 2px solid Black;
      color: white;
      padding: 5% 5%;
      text-align: center;
      text-decoration: none;
      display: inline;
      font-size: 20px;
      cursor: pointer;
      border-radius: 5px; 
      box-sizing: border-box;
}

#button1{
  top: 0;
  left: 0;
  position:absolute;
}

#button2{
 margin-top:0;
 margin-left: 25%;
 position: absolute;
}
<body>
	<div id="container">
		<div id="button1">
		<a href="Somepage.html" class="button">clickme1</a>
		<div id="button2">
		<a href="Somepage2.html" class="button">clickme2</a>
		</div>
	</div>
</body>

标签： htmlcss

解决方案

这是实现菜单的最简单方法，如果您想要更详细的演练，请回复。

.button {
     background-color: #474B4F;  
     border: 2px solid Black;
     color: white;
     padding: 5% 5%;
     text-align: center;
     text-decoration: none;
     font-size: 20px;
     cursor: pointer;
     border-radius: 5px; 
     box-sizing: border-box;
}
#button1,#button2 {
margin:12px;/* If you want spacing between them */
display:inline-block;
}
<body>
    <div id="container">
        <div id="button1">
        <a href="Somepage.html" class="button">clickme1</a>
        </div>
        <div id="button2">
        <a href="Somepage2.html" class="button">clickme2</a>
        </div>
    </div>
</body>

推荐阅读