开发者

Dynamic div width inside another div

开发者 https://www.devze.com 2023-03-08 18:03 出处:网络
I have 2 inline divs inside a parent div: .parent { width: 200px; height: 2开发者_JAVA技巧00px; } .div1 {

I have 2 inline divs inside a parent div:

.parent {
    width: 200px;
    height: 2开发者_JAVA技巧00px;
}
.div1 {
    float: left;
    width: 10px;
    height: 10px;
    background-color: blue;
}
.div2 {
    position: relative;
    height: 100%;
    width: 100%;
    right: 0px;
    float: left;
    background-color: red;
} 

The problem is that div2 inherits the width of the parent div instead of the remaining width (i.e. 190px) and ultimately div2 ends up below div1.

Here is an example using jsfiddle: http://jsfiddle.net/jZBE6/

How can I make div2 have a width of 190px without setting a static width?


You could do it this way:

.parent{
    width:200px;
    height:200px;
}

.div1 {
   float: left;
   width:10px;
   height:10px;
   background-color:blue;
}

.div2{
    height:100%;
    width:90%;
    float:left;
    background-color:red;
} 

You could also do it without floating the right div (this is the way I would prefer):

.parent{
    width:200px;
    height:200px;
}

.div1 {
    float: left;
    width:10px;
    height:10px;
    background-color:blue;
}

.div2{
    height:100%;
    width:100%;
    margin-left:10px;
    background-color:red;
} 


in case you really want a dynamic width (not just 10px case), you can't use css. But you can use javascript to set width dynamically http://jsfiddle.net/jZBE6/19/

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号