CSS固定一个元素除了另一个 [英] CSS fixing an element besides another

问题描述

只是一个简单的问题，我被困住。我玩一些html和css，我想创建一个页面的内容框在页面的中心和两个箭头的图像在内容框的任一侧。现在这不是很难，问题是我使用position：absolute;所以如果我改变窗口大小的元素去坚果..

just a simple question i am stuck with. i am playing around with some html and css, i would like to create a page with content box in the centre of the page and two images of arrows on either side of the content box. now thats not hard at all, the issue is i am using position: absolute; so if i change the window size the elements go nuts..

我的html：

<div id= "left_side">
  <a href=""><img id="leftArrow" src="images/lefta.png"/></a>
</div>

<div id="right_side">
  <a href=""><img id="rightArrow" src="images/righta.png"/></a>
</div>

<div id="content">
  <p>something</p>
  <p>more something</p>
</div>

我的css看起来像这样：

and my css looks like this:

#left_side {
  border: black solid 1px;
  position: absolute;
  left: 0;
  width: 10em;
  text-align: center;
  margin: 65px;
  border-radius: 8px 8px 8px 8px;
  }

#right_side {
  border: black solid 1px;
  position: absolute;
  right: 0;
  width: 10em;
  text-align: center;
  margin: 65px 210px 0px 0px ;
  border-radius: 8px 8px 8px 8px;
  }

#content {
  background-color: white;
  width: 500px;
  margin: 15px 320px 15px 320px;
  padding: 30px;
  border:5px;
  border-radius: 8px 8px 8px 8px;
  }

我可以改变什么，以使侧面图像/按钮相对于内容盒子在任何时候，无论什么屏幕尺寸。我想在一个更大的盒子里嵌套他们，但是最好的做法，或者我走错了脚在一起。

what can i change so that the side images/buttons are relative to the content box at all times no matter what the screen size. i was thinking of nesting them in a bigger box but is that the best practice or am i going off on the wrong foot all together. sorry for the simple question, i am new to this and positioning always kills me.

提前感谢

推荐答案

我通常使用两个包装器div来将它们中间的任何东西（没有绝对风格）。 CSS：

I normally use two wrapper divs to center anything inside them (no absolute style). CSS:

.couter
{
    position: relative;
    left: 50%;
    float: left;
}
.cinner
{
    position: relative;
    left: -50%;
}

并使用如下：

<div class="couter">
    <div class="cinner">
        <div id= "left_side">
          <a href=""><img id="leftArrow" src="images/lefta.png"/></a>
        </div>

        <div id="right_side">
          <a href=""><img id="rightArrow" src="images/righta.png"/></a>
        </div>

        <div id="content">
          <p>something</p>
          <p>more something</p>
        </div>
    </div>
</div>

这篇关于CSS固定一个元素除了另一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！