CSS fixing an element besides another

问题

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..

my 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>

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.

thanks in advance

回答1:

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%;
}

And use like:

<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>

回答2:

If you want the content to expand when the page expands, this is how you could do that:

http://jsfiddle.net/VKBTy/

Also, I would use a container box with position:relative.

回答3:

I have created a jsfiddle for you with a possible solution.

http://jsfiddle.net/simonweston/MuTEn/

HTML:

<div id= "left_side">
LEFT
</div>
<div id="content">
  <p>something</p>
  <p>more something</p>
</div>
<div id="right_side">
  RIGHT
</div>

CSS:

#left_side {
  border: black solid 1px;
  float: left;
  width: 10em;
  text-align: center;
  border-radius: 8px 8px 8px 8px;
  }

#right_side {
  border: black solid 1px;
  float: left;
  width: 10em;
  text-align: center;
  border-radius: 8px 8px 8px 8px;
  }

#content {
  background-color: red;
    float: left;
    width: 100px;
  border:5px;
  border-radius: 8px 8px 8px 8px;
  }

回答4:

The layout which you need can be brought in a very simpler way..

I have modified your css as

#left_side {float:left;width:100px;padding:10px;}
#right_side {float:left;width:100px;padding:10px;}
#content {width:500px;float:left;background:blue;}
.clear{clear:both;}

and your HTML as

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

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

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

<div class="clear"></div>

Please use this code to check whether you got your requirement right..

来源：https://stackoverflow.com/questions/9696978/css-fixing-an-element-besides-another

标签

html

css

position