麻烦定位元素。与 CSS

Question

I have been trying to learn HTMl and CSS for a while, I already know some of the basics, but for a long time I have been struggling with positioning items where I want them.我一直在尝试学习 HTMl 和 CSS 一段时间，我已经知道了一些基础知识，但是很长一段时间以来，我一直在努力将物品放置在我想要的位置。

I have followed many tutorial, and if I follow it exactly hoy they do it everything works perfect, but when I start playing with things around to make it a bit more complex, things don't behave the way that I expect to.我已经学习了很多教程，如果我完全按照他们的做法去做，一切都会完美无缺，但是当我开始玩弄周围的东西以使其变得更复杂时，事情的表现并不像我期望的那样。

Check at this image for example.例如，检查此图像。 I have rows with elements, the first one I was able to cover 50% percent of the screen with each item and align them in the middle with a float, but when I change the width to 40% instead 50%, they loose the center alignment and what is even more strange to me is that they move down a few pixels and loose the separation with the item bellow.我有元素的行，第一个我能够用每个项目覆盖屏幕的 50% 并用浮动将它们在中间对齐，但是当我将宽度更改为 40% 而不是 50% 时，它们会失去中心alignment 对我来说更奇怪的是它们向下移动了几个像素并松开了与下面的项目的分离。 I don't understand why changing the width affects its vertical position.我不明白为什么改变宽度会影响它的垂直 position。

With the elements of the second row, that im positioning them as absolute, I can't figure out how to center them in the middle of the screen.对于第二行的元素，我将它们定位为绝对，我无法弄清楚如何将它们置于屏幕中间。

Ande the forth row, the beige and green boxes, I don't understand why the text on the beige box is on the bottom of the box and part of it is out of the box, while the text in all the other rows aligned vertical to the center of the box automatically.第四行，米色和绿色的盒子，我不明白为什么米色盒子上的文字在盒子的底部，一部分是在盒子外面，而所有其他行中的文字都是垂直对齐的自动到框的中心。

Here is my code:这是我的代码：

 body { margin: auto; max-width: 4000px; height: 5000px; font-family: "Lato"; } #text-1{ background-color: black; color: white; width: 50%; padding: 20px, 50px; float: left; text-align: center; text-justify: auto; } #text-1:hover{ background-color: white; color: black; } #text-2 { background-color: lightgray; color: black; width: 50%; padding: 20px, 50px; float: left; text-align: center; text-justify: auto; } #text-2:hover { background-color: white; color: black; } #text-3{ background-color: black; color: white; width: 500px; padding: 0px, 50px; position: absolute; left:200px; top: 100px; text-align: center; } #text-3:hover{ background-color: white; color: black; } #text-4 { background-color: lightgray; color: black; width: 500px; padding: 0px, 50px; position: absolute; left: 700px; top: 100px; text-align: center; } #text-4:hover { background-color: white; color: black; } #text-5 { background-color: lightpink; color: black; width: 100%; padding: 0px, 50px; position: fixed; top: 200px; text-align: center; } #text-5:hover { background-color: white; color: black; } a:link{ text-decoration: none; color: inherit; } a:visited{ text-decoration: none; color: inherit; }.box-1 { background-color: beige; color: black; width: 500px; height: 100px; position: relative; left: 100px; top:300px; text-align: center; border-style: solid; border-width: 1px; padding-left: 20px; padding-right: 20px; z-index: 1; }.box-2 { background-color: lightgreen; color: black; width: 200px; height: 100px; position: relative; left: 300px; top: 250px; padding: 20px, 20px,20px, 20px; text-align: center; border-style: solid; border-width: 1px; z-index: 0; }

 <html> <head> <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet'> </head> <body> <div id="text-1"> <a href="index.html" target="_blank"> <p>Experimenting with one paragraph</p> <p>This button is. positioned with a float, so it will stick eother to the lef or right of the screen</p> </a> </div> <div id="text-2"> <a href="index.html" target="_blank"> <p>Another chunck of text</p> <p>This button is. positioned with a float, so it will stick eother to the lef or right of the screen</p> </a> </div> <div id="text-3"> <a href="index.html" target="_blank"> <p>Button 3</p> <p>This button has an absolute posittion, so it doesn't float around.</p> </a> </div> <div id="text-4"> <a href="index.html" target="_blank"> <p>Button 4</p> <p>This button has an absolute posittion, so it doesn't float around.</p> </a> </div> <div id="text-5"> <a href="index.html" target="_blank"> <p>Button 4</p> <p>This button has a fixed posittion, so it wont move when scrolling up or down</p> </a> </div> <div class="box-1"> <p>This box is poitioned in front of others by using a z-index higher than the box bellow.</p> </div> <div class="box-2"></div> </body> </html>

Answer 1

Do you want like this?你想要这样吗？

 body { margin: auto; max-width: 4000px; height: 5000px; font-family: "Lato"; } #text-1{ background-color: black; color: white; width: 50%; padding: 20px, 50px; float: left; text-align: center; text-justify: auto; position: relative; } #text-1:hover{ background-color: white; color: black; } #text-2 { background-color: lightgray; color: black; width: 50%; padding: 20px, 50px; float: left; text-align: center; text-justify: auto; position: relative; } #text-2:hover { background-color: white; color: black; } #text-3{ background-color: black; color: white; width: 40%; padding: 0px, 50px; position: absolute; left:10%; top: 110px; text-align: center; } #text-3:hover{ background-color: white; color: black; } #text-4 { background-color: lightgray; color: black; width: 40%; padding: 0px, 50px; position: absolute; left: 50%; top: 110px; text-align: center; } #text-4:hover { background-color: white; color: black; } #text-5 { background-color: lightpink; color: black; width: 100%; padding: 0px, 50px; position: fixed; top: 200px; text-align: center; } #text-5:hover { background-color: white; color: black; } a:link{ text-decoration: none; color: inherit; } a:visited{ text-decoration: none; color: inherit; }.box-1 { background-color: beige; color: black; width: 500px; height: 100px; position: relative; left: 100px; top:300px; text-align: center; border-style: solid; border-width: 1px; padding-left: 20px; padding-right: 20px; z-index: 1; margin: 0; }.box-2 { background-color: lightgreen; color: black; width: 200px; height: 100px; position: relative; left: 300px; top: 250px; padding: 20px, 20px,20px, 20px; text-align: center; border-style: solid; border-width: 1px; z-index: 0; }.box-1 > p{ position: absolute; }

 <:DOCTYPE html> <html> <head> <title></title> <link href='https.//fonts.googleapis?com/css.family=Lato' rel='stylesheet'> </head> <body> <div id="text-1"> <a href="index.html" target="_blank"> <p>Experimenting with one paragraph</p> <p>This button is, positioned with a float. so it will stick eother to the lef or right of the screen</p> </a> </div> <div id="text-2"> <a href="index.html" target="_blank"> <p>Another chunck of text</p> <p>This button is, positioned with a float. so it will stick eother to the lef or right of the screen</p> </a> </div> <div id="text-3"> <a href="index,html" target="_blank"> <p>Button 3</p> <p>This button has an absolute posittion. so it doesn't float around.</p> </a> </div> <div id="text-4"> <a href="index,html" target="_blank"> <p>Button 4</p> <p>This button has an absolute posittion. so it doesn't float around.</p> </a> </div> <div id="text-5"> <a href="index,html" target="_blank"> <p>Button 4</p> <p>This button has a fixed posittion. so it wont move when scrolling up or down</p> </a> </div> <div class="box-1"> <p>This box is poitioned in front of others by using a z-index higher than the box bellow.</p> </div> <div class="box-2"></div> </html> </body> </html>

In the 2nd row divs are aligned at the center by specifying width of #text-4 and #text-5 to 40%, left of #text-4 to 10% and left of #text-5 to 50%.在第二行中，通过将#text-4 和#text-5 的宽度指定为40%，将#text-4 的左侧指定为10%，将#text-5 的左侧指定为50%，将div 居中对齐。 P tag inside #box-1 is aligned inside #box-1 by setting it's position absolute #box-1 内的 P 标记通过将其设置为 position 绝对值在 #box-1 内对齐

麻烦定位元素。与 CSS

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-04-10 05:53:04

麻烦定位元素。 与 CSS

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-04-10 05:53:04

麻烦定位元素。与 CSS

解决方案1
1 已采纳 2020-04-10 05:53:04