将div定位在其包含div的右侧 [英] Positioning a div to the right of its containing div

查看:222
本文介绍了将div定位在其包含div的右侧的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我知道这个问题听起来很基础,但是我无法解决它。我有一个div容器,我试图将一个子div定位在右侧。我尝试将div相对于容器,然后用绝对值定位子div,但父div失去了宽度。

I know this question will sound very basic but i just am not able to fix it.I have got a div container and im trying to position the a child div to the right.I tried positioning the container div with relative and then positioning the child div with absolute,but the parent div loses its width.

请看一下上面的图片,我需要div1将自身定位在divContainer的右边。我在divContainer中还有其他嵌套的div,我只需要将div1放在右边即可。

please have a look at the image above,i need the div1 to position itself right of the divContainer. I have got other nested divs in divContainer, i need only div1 to be postioned on the right.

div#divContainer{
    margin-left:auto;
    margin-right:auto;
    top: 0px;
    width:1000px;
    background:#666;
    position:relative;

}
div#div1{
    height:45px;width:200px;
    background:yellow;
    position:absolute;

}

HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title></title>

    </head>
    <body>
        <div id="divContainer">
            <div id="div1"></div> 
        </div>
    </body>
</html>


推荐答案

假设#div1是导航类型div,则您

Assuming that #div1 is a nav type div, you should just float it to the side you want it.

div#div1{
  height:45px;width:200px;
  background:yellow;
  float:right;
}

这绝对会将其放置在文档中。如果您对此有疑问,则可能需要花一些时间阅读一些有关CSS定位的好资源。 A List Apart 拥有大量的CSS资源。

This will position it absolutely within your document. If you're having trouble with this, you may want to spend some time reading some good resources about CSS positioning. A List Apart has great resources for CSS.

这篇关于将div定位在其包含div的右侧的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆