Question

这就是我现在所拥有的，在你放大 - https://jsfiddle.net/6mjrjayh/1/

之前它的效果非常好

HTML

<div id="box1">
<p><strong>About me</strong></p>
<img src ="images/hack.jpg"/>
<p><strong>Image Courtesy Bob Marley</strong><br></br>
<a href="www.google.com">www.google.com</a></p>
</div>

<div id="box2">
<p>
Hi there!
<br></br>
I'm bob, a freelance designer and developer<br>
I'm bob, a freelance designer and developer<br>
I'm bob, a freelance designer and developer<br>
I'm bob, a freelance designer and developer<br>
I'm bob, a freelance designer and developer<br>
I'm bob, a freelance designer and developer<br>
I'm bob, a freelance designer and developer<br>
I'm bob, a freelance designer and developer<br>
I'm bob, a freelance designer and developer<br>
<br><br><br>
</p>
</div>

CSS

#box1 {
  float: left;
  position:absolute;
  padding-left:50px;
}

#box2 {
    width: 20em;
    margin: 0 auto 1em auto;
}

我想要它，所以当你放大/缩小box1保持其相对于box2的确切位置时，就像现在没有缩放一样。很抱歉，如果我没有正确解释它，但是Riot Zeast Captain几乎已经按照我想要的方式得到了它，除了box2改变了它的位置，而box1保留了它，而我希望它在我放大/缩小页面时反过来。

Answer 1

＆＃13;

.boxes{
  width: 90vw;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid #ccc;
  display: inline-block;
}
#box1{
  width: 300px;
  border: 1px solid #ccc;
  margin: 5px;
  float: left;
  margin-left: calc(100vw / 4);
}
#box2{
  float: left;
  border: 1px solid #ccc;
  margin: 5px;
}

＆＃13;

<div class="boxes">
  <div id="box1">
    <p><strong>About me</strong></p>
    <img src ="images/hack.jpg"/>
    <p><strong>Image Courtesy Bob Marley</strong><br><br>
      <a href="www.google.com">www.google.com</a></p>
  </div>

  <div id="box2">
    <p>
      Hi there!
      <br><br>
      I'm bob, a freelance designer and developer<br>
      I'm bob, a freelance designer and developer<br>
      I'm bob, a freelance designer and developer<br>
      I'm bob, a freelance designer and developer<br>
      I'm bob, a freelance designer and developer<br>
      I'm bob, a freelance designer and developer<br>
      I'm bob, a freelance designer and developer<br>
      I'm bob, a freelance designer and developer<br>
      I'm bob, a freelance designer and developer<br>
      <br><br><br>
    </p>
  </div>
</div>

＆＃13;

这里的工作代码是您的必需输出，但它没有响应。链接

Answer 2

试试这个： -

  

 #box1 {
  float: left;
  position:absolute;
  padding-left:50px;
}

#box2 {
    position: absolute;
    padding-top: 160px;
    text-align: center;
    width: 20em;
    margin: 0 auto 1em auto;
}

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
    </head>
    <body>
        <div id="box1">
<p><strong>About me</strong></p>
<img src ="images/hack.jpg"/>
<p><strong>Image Courtesy Bob Marley</strong><br></br>
<a href="www.google.com">www.google.com</a></p>
</div>

<div id="box2">
<p>
Hi there!
<br></br>
I'm bob, a freelance designer and developer<br>
I'm bob, a freelance designer and developer<br>
I'm bob, a freelance designer and developer<br>
I'm bob, a freelance designer and developer<br>
I'm bob, a freelance designer and developer<br>
I'm bob, a freelance designer and developer<br>
I'm bob, a freelance designer and developer<br>
I'm bob, a freelance designer and developer<br>
I'm bob, a freelance designer and developer<br>
<br><br><br>
</p>
</div>
    </body>
</html>

如果它不起作用，请告诉我。

Answer 3

我添加了位置：固定;和z-index：99;你的代码。你在找这个吗？

＆＃13;

#box1 {
  float: left;
  position:fixed;
  display:inline-block;
  padding-left:50px;
  border:solid 1px red;
  background-color:red;
  z-index:99;
}

#box2 {
    width: 20em;
    height:500px;
    margin: 0 auto 1em auto;
    border:solid 1px blue;
}

＆＃13;

<div id="box1">
  <p><strong>About me</strong></p>
  <img src ="images/hack.jpg"/>
  <p><strong>Image Courtesy Bob Marley</strong>
  <a href="www.google.com">www.google.com</a></p>
</div>

<div id="box2">
  <p>
  Hi there!
  <br>
  I'm bob, a freelance designer and developer<br>
  I'm bob, a freelance designer and developer<br>
  I'm bob, a freelance designer and developer<br>
  I'm bob, a freelance designer and developer<br>
  I'm bob, a freelance designer and developer<br>
  I'm bob, a freelance designer and developer<br>
  I'm bob, a freelance designer and developer<br>
  I'm bob, a freelance designer and developer<br>
  I'm bob, a freelance designer and developer<br>
  <br><br><br>
  </p>
</div>

＆＃13;

如何居中一个div并让另一个div浮动到它？

3 个答案: