將一個div放置在左下方

如何將內部div sqrBall移動到父div的左下方container。下面是HTML代碼：將一個div放置在左下方

<div class="container"> 
    <div class="sqrBall"> 

    </div> 
</div>

這裏是CSS：

.container{ 
     width: 500px; 
     height: 500px; 
     border: 1px solid black; 
     margin: 0 auto; 
    } 
    .sqrBall{ 
     width: 10px; 
     height: 10px; 
     background-color: blue; 

    }

這裏是一個DEMO

來源

2015-03-02 iJade

http://jsfiddle.net/z8goh9jd/1/ – 2015-03-02 08:33:12

@NaeemShaikh我非常新的CSS，所以只是想知道如果做到這一點任何其他方式，而不使用相對和絕對定位 – iJade 2015-03-02 08:34:46

您可以在內部元件上使用絕對定位如果父元素具有相對定位。例如：

.container{ 
    width: 500px; 
    height: 500px; 
    border: 1px solid black; 
    margin: 0 auto; 
    position:relative; 
} 

.sqrBall{ 
    width: 10px; 
    height: 10px; 
    background-color: blue; 
    position:absolute; 
    bottom:0; 
    left:0; 
}

n.b.如果父母沒有相對定位，則內部元素將位於身體的左下角，而不是其父母。 （至少在這個例子中）

來源

2015-03-02 08:33:43 atmd

試試這個演示 Fiddle

.sqrBall { 
width: 10px; 
height: 10px; 
background-color: blue; 
position: absolute; 
top: 98%; 
left: 0; 
    } 
.container 
{ 
position:relative; 
}

來源

2015-03-02 08:35:12 priya786

.container { 
 
    width: 300px; 
 
    height: 300px; 
 
    border: 1px solid black; 
 
    margin: 0 auto; 
 
    position: relative /* Container should have relative position */ 
 
} 
 
.sqrBall { 
 
    position: absolute; /* Child should have absolute position */ 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 30px; 
 
    height: 30px; 
 
    background-color: blue; 
 
}

<div class="container"> 
 
    <div class="sqrBall"> 
 

 
    </div> 
 
</div>

來源

2015-03-02 08:35:19

.container{ 
     width: 500px; 
     height: 500px; 
     border: 1px solid black; 
     margin: 0 auto; 
     position:relative; 
    } 
    .sqrBall{ 
     width: 10px; 
     height: 10px; 
     background-color: blue; 
     position:absolute; 
     bottom:0; 
     left:0; 

    }

來源

2015-03-02 08:35:54 zenbormi

嘗試這樣的：Demo

添加以下連同你的代碼

CSS：

.container {  
    display:table; 
} 
.sqrBall {  
    float:left; 
    margin-top: 100%; 
}

來源

2015-03-02 08:40:19

你有兩個屬性添加到您現有的類.sqrBall

屬性是...

position: relative; 
top: 98%;

以下是工作演示，希望對你有所幫助

<style type="text/css"> 
 
.container 
 
{ 
 
    width: 500px; 
 
    height: 500px; 
 
    border: 1px solid black; 
 
    margin: 0 auto; 
 
} 
 
.sqrBall 
 
{ 
 
    background-color: blue; 
 
    height: 10px; 
 
    position: relative; 
 
    top: 98%; 
 
    width: 10px; 
 
} 
 
</style> 
 

 

 

 
<html> 
 
<div class="container"> 
 
\t \t <div class="sqrBall"> 
 

 
\t \t </div> 
 
\t </div> 
 

 
</html>

來源

2015-03-02 08:45:33

將一個div放置在左下方

回答

相關問題