Question

你好，在我的页面上，我有2个角色的图像，我放在文字和横幅的两边，下面是一张照片http://i.imgur.com/KwzphQP.jpg但是这是问题，当我重新浏览我的浏览器时，图像跟随浏览器，他们不会保持相同的位置，我不希望这发生，因为我有一个固定的布局，继承人的CSS代码，我不知道如何发布好，但无论如何

.support-text {
  width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: -2px;
    margin-bottom: 130px;

}

.support-text h1 {
  font-size: 30px;
}

.support-text {
  clear: left;
}

.support-text {
  font-size: 23px;
}

.support-img {
  margin-top: -80px;
  margin-bottom: 80px;
  z-index: 1;
}

.ct-pic {
  position: absolute;
  right: 10px;
  bottom: 30px;
  float: right;
}

.ct-pic:hover {
  -webkit-filter: brightness(180%);
}

.t-pic:hover {
  -webkit-filter: brightness(180%);
}

.t-pic {
  position: absolute;
  left: 40px;
  bottom: 30px;
  float: left;
}

继承人html

<section class="support-text">
          <div class="ct-pic"> </div>
     <div class="t-pic" width="867" height="569"></div>
      <img src="img/support-us.png" class="support-img">
      <p>Hello, if this site has helped you improve your gameplay, and learn useful stuff, feel free to support us, so we can keep this website up, so more people can learn. You can support through Steam or throught paypal. Keep in mind that you do not have to support, but if you do, we appreciate it alot. and we can continue to upload new content (Smokes, flashes, tactics) to the website. </p>

    </section>

Answer 1

下面是一个例子，说明当你调整窗口大小时（div可以是img标签或者你想要的任何东西），如何在没有它们移动或改变位置的情况下将事物放在彼此旁边。只需将它们放入具有固定宽度的“容器”中，然后将它们浮动到该容器中

<div id='container'> 
    <div id='image-1' class='image'></div>
    <div id='image-2' class='image'></div>
    <div id='image-3' class='image'></div>
</div>

#container {
    width: 200px;
    height: 100px;
    background: black;
}
.image {
    background: white;
    width: 20px;
    height: 20px;
    float: left;
    margin: 20px;
}

http://jsfiddle.net/7qytj718/1/

<强> 更新

你的css有问题。您将子元素的位置设置为绝对，这使得它们忽略其父元素并相对于整个窗口定位。发生这种情况时，子元素会在调整窗口大小时开始移动。

在调整浏览器大小时，如何保留图像？

1 个答案: