gpt4 book ai didi

html - div 和图像的 CSS 对齐问题

转载 作者:行者123 更新时间:2023-11-28 04:17:02 25 4
gpt4 key购买 nike

我什至不知道这是否可能。如果查看下图,您会看到一个紫色框和一个白色框。白色盒子里有我的狗 Zuko 的照片。我试图使该照片的右边缘与它后面的紫色框的右边缘完全对齐。但是当然,当你开始稍微改变屏幕尺寸时,它就不再对齐了。有没有办法将这两个 div 固定在一起,以便在调整屏幕时,它们一起调整并保持对齐?我尝试使用百分比将它们都固定为绝对值,但我什至不知道我的目标是否可行。

box1 是紫色框,box2 是包含照片的白色框。

page image

<html>
<head>
<meta charset="utf-8">
<title>ZUKO</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<img id="zuko-title" src="zuko-title.svg" alt="Zuko">
<div id="box1" class="floater"></div>
<div id="box2" class="floater">
<div class="intro-text">
<h3>hi, i'm Zuko the dog.</h3>
</div>
<img id="zuko-bolts" src="zuko-bolts.svg" alt="">
</div>
<div id="box3" class="floater">
<ul>
<li><a href="#">about</a></li>
<li><a href="#">frolicking</a></li>
<li><a href="#">my 'rents</a></li>
<li><a href="#">stuff</a></li>
</ul>
</div>

</body>
</html>

.floater {
position: absolute;
}

#box1 {
background-color: #DB7ACC;
width: 74%;
height: 100%;
top: 17%;
left: 15%;
z-index: 1;
}

#box2 {
background-color: #fff;
width: 84%;
height: 100%;
top: 25%;
left: 11%;
z-index: 3;
}

#zuko-bolts {
height: 50%;
float: right;
margin-right: 7.2%;
position: absolute;
}

最佳答案

  1. #box2 放在 box#1 中。
  2. 由于它们都已定位并且子项(即 #box2)是绝对,我们可以将 #box2 定位在#box1 的范围。
  3. 如果我们希望#box2的右边缘与#box1的右边缘齐平,设置#box2 right:0; 这将适用于任何边缘,因此 top:0; 会将 #box2 的上边缘设置为 # 的上边缘box1,依此类推。
  4. 如果我们在全页模式下查看代码段,我们会发现无论视口(viewport)(屏幕宽度)如何变化,#box2 不仅在尺寸上与 # 一致box1,它将始终保持在相对于 #box1 边界的相同位置。

片段

.floater {
position: absolute;
}
#box1 {
background-color: #DB7ACC;
width: 74%;
height: 100%;
top: 17%;
left: 25%;
z-index: 1;
}
#box2 {
background-color: #fff;
width: 84%;
height: 100%;
top: 25%;
right: 0;
z-index: 3;
background: url(http://news.vet.tufts.edu/wp-content/uploads/national-pet-dental-health-month.jpg)no-repeat;
background-size: contain;
border: 1px dashed #db7acc;
}
#zuko-bolts {
height: 50%;
float: right;
margin-right: 7.2%;
position: absolute;
}
<html>

<head>
<meta charset="utf-8">
<title>ZUKO</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>

<body>
<img id="zuko-title" src="zuko-title.svg" alt="Zuko">

<div id="box1" class="floater">

<div id="box2" class="floater"></div>

</div>

<div class="intro-text">
<h3>hi, i'm Zuko the dog.</h3>
</div>
<img id="zuko-bolts" src="zuko-bolts.svg" alt="">
</div>
<div id="box3" class="floater">
<ul>
<li><a href="#">about</a>
</li>
<li><a href="#">frolicking</a>
</li>
<li><a href="#">my 'rents</a>
</li>
<li><a href="#">stuff</a>
</li>
</ul>
</div>

</body>

</html>

关于html - div 和图像的 CSS 对齐问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41884476/

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