2017-10-18 96 views
-2

對不起,這個問題是alreasy回答...如何把2個div放在一起?

+0

你的數學不是很有意義。更重要的是,左div佔寬度的85%,或其他div爲50px?在320像素的分辨率下,這將會超過100% – iagowp

回答

0

你是非常接近我會如何做到這一點。切換rightDiv和leftDiv並leftDiv只是右側的52px保證金,而不是浮動:

.container{ 
 
    width: 85%; 
 
    background-color: yellow; 
 
    border: 1px solid red; 
 
} 
 

 
.leftDiv{ 
 
    margin-right: 52px; 
 
    background-color: green; 
 
    border: 1px solid black; 
 
} 
 

 
.rightDiv{ 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: blue; 
 
    border: 1px solid black; 
 
    float: right; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 

 
    <div class="rightDiv"></div> 
 

 
    <div class="leftDiv"> 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

+0

這是52px,因爲您的浮動區域寬度爲50px,周圍有1px的邊框(添加2px)。如果沒有它是52px,並且只有50px,則右側div的左側2px將與左側div重疊。是的,如果您刪除了右側div的邊框,則只需使用50px。 –

0

使用的CLAC()方法.rightDiv{ width: calc(100% - 54px);}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
.container{ 
 
    width: 85%; 
 
    background-color: yellow; 
 
    border: 1px solid red; 
 
} 
 

 
.leftDiv{ 
 
    width: calc(100% - 54px); 
 
    background-color: green; 
 
    border: 1px solid black; 
 
    float: left; 
 
} 
 

 
.rightDiv{ 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: blue; 
 
    border: 1px solid black; 
 
    float: left; 
 
} 
 

 
</style> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 

 
    <div class="leftDiv"> 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    Long text... Long text... Long text... Long text... Long text... 
 
    </div> 
 

 
    <div class="rightDiv"></div> 
 
</div> 
 

 
</body> 
 
</html>

+0

calc複雜嗎?哦,你需要學習CSS的男孩然後 – dippas

+0

IE8被棄用,IE9它正在通往它。無論如何... – dippas

+0

你只能使用'calc'或'js'沒有其他辦法:( –