Fatal编程技术网
  • css/
  • Div定位帮助css

Div定位帮助css

css html

Div定位帮助css,css,html,Css,Html,看看这张图片 所有的盒子都是div。我怎样才能这样定位它们？这是我到目前为止得到的 #container{ position:relative; padding:25px; } #div1 { float:left; margin-left: 50px; margin-top: 50px; width: 300px; padding:25px; } #div2 { clear:both; margin-left: 50p

看看这张图片

所有的盒子都是div。我怎样才能这样定位它们？这是我到目前为止得到的

#container{
    position:relative;
    padding:25px;
}

#div1 {
    float:left;
    margin-left: 50px;
    margin-top: 50px;
    width: 300px;
    padding:25px;
}

#div2 {
    clear:both;
    margin-left: 50px;
    width: 300px;
    padding:25px;
}

#div3 {
    float:right;
    margin-right: 50px;
    margin-top: -100px;
    width: 300px;
    padding:25px;
}
使用上面的代码，..div1和div2以某种方式正确定位。但是div3在页面的下半部分。

我会浮动：右键浮动div3，首先在HTML中使用它，然后不浮动div1和div2

类似这样的内容：

…或者您可以将div1和div2包装在自己的包装中，并将其浮动。

将您的左div包装在一列中。因此，您的标记将如下所示：

<div id="container">
  <div id="main">
    <div id="div1">div1</div>
    <div id="div2">div2</div>
  </div>
  <div id="div3">div3</div>
</div>

#container{
    position:relative;
    padding:25px;
}
#main {
    float:left;
    width:100px;
}
#div1 {
    padding:25px;
}
#div2 {
    padding:25px;
}
#div3 {
    float:right;
    width: 100px;
    padding:25px;
}
这里有一个例子：

一个不需要添加额外div的替代方法是在div3上使用绝对定位，同时在容器上使用额外的填充为div3创建空间

请看这里的小提琴：

CSS:

编辑：我忘记提到的一个问题是，绝对定位的div3将不再影响外部div的高度。因此，如果你有一个较长的div3，如果没有一些额外的技巧，这可能无法工作。

这里看起来像你的图片，但我建议查看类似网站设计的网站

<html>
    <head>
        <title>Div Positioning</title>
        <style type='text/css'>

            #div1
            {
                position: absolute;
                top: 25px;
                left: 25px;
                height: 200px;
                width: 200px;
                border: 1px solid red;
            }

            #div2
            {
                position: absolute;
                top: 250px;
                left: 25px;
                height: 200px;
                width: 200px;
                border: 1px solid red;
            }

            #div3
            {
                position: absolute;
                top: 25px;
                left: 250px;
                height: 425px;
                width: 300px;
                border: 1px solid red;
            }

        </style>
    </head>
    <body>
        <div id='div1'></div>
        <div id='div2'></div>
        <div id='div3'></div>
    </body>
</html>
我想他也必须为这个容器指定一个宽度。它不起作用。div3向上移动了，但它们还没有静止leveled@samn，不需要。容器应该像它的父容器一样100%宽。是的，通常会有，毫无疑问，下面会有一些建议：-但问题是你希望你的站点如何工作，以及结构应该如何运作。我会小心绝对定位，其他人对此很满意。我使用的是响应性设计，因此在定位时非常小心。好的，先生，注意！。非常感谢你！“在哪里使用absolute everywhere的容器是多余的，对于未来的更改将不灵活。@MoinZaman I只创建了jovhenni19要求的内容。容器本身就是添加另一个容器的主体，没有任何作用。我特意指示jovhenni19查看像cssplay这样的站点，以解决问题中缺乏设计考虑的问题。我不知道jovhenni19希望从所问的问题中得到什么，并给出了与问题相匹配的答案。你的div1和div2也有动态内容吗？如果div3是动态的，但是div1和div2的高度是固定的，那么您可以随时改变技巧。或者，如果您知道div3的高度，可以添加一个最小高度：；到集装箱。 
<html>
    <head>
        <title>Div Positioning</title>
        <style type='text/css'>

            #div1
            {
                position: absolute;
                top: 25px;
                left: 25px;
                height: 200px;
                width: 200px;
                border: 1px solid red;
            }

            #div2
            {
                position: absolute;
                top: 250px;
                left: 25px;
                height: 200px;
                width: 200px;
                border: 1px solid red;
            }

            #div3
            {
                position: absolute;
                top: 25px;
                left: 250px;
                height: 425px;
                width: 300px;
                border: 1px solid red;
            }

        </style>
    </head>
    <body>
        <div id='div1'></div>
        <div id='div2'></div>
        <div id='div3'></div>
    </body>
</html>