Question

我甚至不知道这是否可行。如果你看看下面的图片，你会看到一个紫色的盒子和一个白色的盒子。白盒子里有我的狗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;
}

Answer 1

将template<class key> struct rec_map_iterator; template<class key> using rec_map = map<key, vector<rec_map_iterator<key>>>; template<class key> struct rec_map_iterator : rec_map<key>::iterator { rec_map_iterator(typename rec_map<key>::iterator i) : rec_map<key>::iterator(i) {} };放在rec_map<int> my_map;。
由于它们都已定位且子项（即#box2）为box#1，因此我们可以将#box2置于absolute的范围内。
如果我们希望#box2的右边缘与#box1的右边缘齐平，请设置#box2 #box1这将适用于任何边缘{{1将#box2的上边缘设置为right:0;的上边缘，依此类推。
如果我们在整页模式下查看代码段，我们会看到无论视口（屏幕宽度）如何变化，top:0;不仅会相对于#box2符合规模，它还会始终保持相对于#box1边界的相同位置。

<强>段

#box2

#box1

Answer 2

这个问题还有很多......这就是我如何处理你所要求的布局。如果您有具体问题，请告诉我。

CODEPEN

紫色盒子...... 将图像包装在容器中，然后使用伪元素创建边框。

示例

.image-container { height: 150%; margin-right: 10%; width: 90%; text-align: right; position: relative; } .image-container::before { content: ''; display: block; position: absolute; top: -50px; width: 90%; right: 0; border-top: 50px solid purple; }

完整摘要

＆＃13;
＆＃13;
body { width: 1200px; margin: 150px auto 0; background: lightgreen; position: relative; } .intro-text { position: relative; } .intro-text h3 { position: absolute; font-size: 120px; letter-spacing: 4px; top: -240px; left: 120px; z-index: 5; font-weight: bold; font-family: sans-serif; } #box2 { background-color: #fff; width: 84%; z-index: 3; padding-bottom: 150px; position: relative; } #box2::after { content: " "; display: block; height: 0; clear: both; } .image-container { height: 150%; margin-right: 10%; width: 90%; text-align: right; position: relative; } .image-container::before { content: ''; display: block; position: absolute; top: -50px; width: 90%; right: 0; border-top: 50px solid purple; } #zuko-bolts { width: 40%; } #box3 { /* this menu is strangely coded */ position: absolute; top: 50px; left: -150px; z-index: -1; }
＆＃13;
<img id="zuko-title" src="https://placehold.it/50x50" alt="Zuko"> <div id="box1" class="floater"></div> <div id="box2" class="floater"> <div class="intro-text"> <h3>ZUKO</h3> </div> <div class="image-container"> <img id="zuko-bolts" src="https://placehold.it/50x50" alt=""> </div> </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>
＆＃13;
＆＃13;
＆＃13;

Answer 3

我有一种不同于Ed的方法，可能是因为它不是你需要的，但如果你能解释你需要什么，我会非常乐意帮助你。

我的HTML很难，所以我稍微改了一下。希望您可以自己弄清楚需要更改或添加哪些部分。

我试图尽可能完整地评论代码，以防您理解不清楚。

body,
html {
  height: 100%;
  margin: 0;
  box-sizing: border-box;
  background-color: lightgreen;
  /*Makes the height and margin for both the HTML and Body elements 100% of the available height, also removes margins.*/
}
.wrapper.zuko {
  /*The wrapper for the stuff so that we don't polute our regular HTML with styles and colors we don't need.*/
  position: relative;
  /* Makes absolute positioning work as expected for child elements*/
  background-color: white;
  height: 100%;
  /*Make it 100% as tall as its parent*/
  width: 80%;
  /* but only 80% as wide*/
  margin: 50px auto;
  /* 50px margin on the top and bottom, automatic padding on the left and right*/
  padding-top: 10px;
}
.wrapper.zuko .zuko-title {
  position: absolute;
  /*Changes how this is positioned with respect to its parent.*/
  height: 25px;
  /*makes the element 25 pixels high*/
  line-height: 50px;
  /*Probably not needed, but it was ther*/
  font-size: 45px;
  /*How big is the title text? Hella.*/
  padding-left: 5px;
  /* Little bit of padding on the left to ensure it's not right on the border */
  top: -25px;
  /* positioned 25 pixels above the top border of it's parent */
  left: 5%;
  /* left by 5%*/
  right: 10%;
  /* right by 10% */
  background-color: #cd00cd;
  /*random purple color */
}
.wrapper.zuko .zuko-title .zuko-title-img {
  position: absolute;
  /*again, changes how this thing is positioned by its parent*/
  right: 0;
  /* directly on the right edge */
  top: 100%;
  /* 100% of the elements height from the top edge of the element */
}
.wrapper.zuko .zuko-title .zuko-title-text {
  position: absolute;
  top: -20px;
  /*Twitches the text above the purple border like in image.*/
}

<div class="wrapper zuko">
  <div class="zuko-title">
    <div class="zuko-title-text">
      Zuko
    </div>
    <img src="http://placehold.it/300x200?text=Zuko" alt="" class="zuko-title-img" />
  </div>
  <div>Hello
  </div>
</div>

Answer 4

#zuko-bolts {
position: absolute;
height: 50%;
right: 7.14%;
top: 0;
}

紫色方框的右侧比白色方框右侧多6％。由于图像位于白框内，因此您需要在84％的框中找到相等的6％屏幕尺寸距离。基本上，6x100 / 84 =约7.14。

Answer 5

（代表OP发布）。

非常感谢大家的帮助。我所要做的就是改变高度：50％到宽度，这使它像预期的那样对齐。

带有div和图像的CSS对齐问题

5 个答案: