定位兩個div在相同的高度和位置

我有兩個div，第一個寬度爲父div的30％，第二個爲70％。兩者都有不同的高度。下面的代碼顯示我的屏幕，如左側。定位兩個div在相同的高度和位置

<div id="parent"> 
    <div id="div1">...</div> 
    <div id="div2">...</div> 
</div>

enter image description here

我想獲得像屏幕右側。兩個div都在同一層次上，並且具有相同的高度，即等於較長div的高度。我應該在我的CSS代碼中寫什麼？

CSS文件：

#parent { 
} 

#div1 { 
    width: 30%; 
} 

#div2 { 
    width: 70%;

}

來源

2013-12-09 Jacek

我們需要看到爲了告訴你什麼改變... –

請附上您的CSS代碼。 –

你把它分類了嗎？ –

設置你的div浮動的一個（或兩個）的值：離開了。這會導致任何內容環繞對象，並且對象位於內容的左側。

#div1{ 
    float: left 
}

http://www.w3schools.com/cssref/pr_class_float.asp

來源

2013-12-09 23:00:26

它通常不贊成引用w3schools ...使用此鏈接作爲學習「浮動」的更好資源https://developer.mozilla.org/en-US/docs/Web/CSS/float –

這不解決OP的問題。他希望兩個div都有相同的高度。 –

這裏有一個的jsfiddle，做什麼，我覺得你要尋找的。兩個div都在同一層次上，並且根據要求具有相同的高度（由#div2確定）。

http://jsfiddle.net/QxvWr/4/

HTML

<div class="wrapper"> 
    <div id="div1"></div> 
    <div id="div2"></div> 
</div>

CSS

.wrapper { 
    position: relative; 
    overflow:hidden; 
} 
#div1 { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width:30%; 
    height: 100%; 
    background: yellow; 
} 
#div2 { 
    margin-left:30%; 
    width:70%; 
    height: 200px; /* change to whatever you want, or remove and have the div's content dictate the size. Note, overflow:hidden was added below for this very reason */ 
    background: orange; 
    overflow:hidden; 
}

來源

2013-12-09 23:05:50

檢查下面的代碼它的工作原理

<style> 

#wrapper 
{ 
margin:0px auto; 
padding:0px; 
width:1000px; 

     } 
#div1 
{ 
margin:0px; 
padding:0px; 
width:250px; 
float:left; 
height:500px; 
background-color:red; 
} 

#div2 
{ 
margin:0px; 
padding:0px; 
width:750px; 
height:500px; 
float:right; 
background-color:blue; 
     } 
</style> 

<div id="wrapper"> 
    <div id="div1">...</div> 
    <div id="div2">...</div> 
</div>

及以下的小提琴例如http://jsfiddle.net/QxvWr/5/

來源

2013-12-10 05:51:21

定位兩個div在相同的高度和位置

回答

相關問題