如何安排兩個彼此相鄰的div？

所以，這個問題相當明顯。現在我在div容器中有兩個元素，它們應該彼此鄰接，但由於缺乏CSS技巧，我需要你的幫助。所以，代碼是相當原始的。如何安排兩個彼此相鄰的div？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Новый формат общения</title> 
    <html> 
     <link rel="stylesheet" type="text/css" href="center_ribbon.css"> 
<link rel="stylesheet" type="text/css" href="center.css"> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <style> 


.center { 
    top: 50%; 
    left: 50%; 
    width: 310px; 
    height: 50px; 
    position: absolute; 
    margin-top: -155px; 
    margin-left: -25px; 
} 

    </style> 
    <body> 
     <div class="center"><div class="ribbon"><div class="ribbon-stitches-top"></div><strong class="ribbon-content"><h1>foo</h1></strong><div class="ribbon-stitches-bottom"></div></div></div> 

     <div class="wrap"><div class = "lifted"> 
     <p>footext</p></div></div> 
    </body> 
    </html>

所以，CSS的相應代碼如下

center_ribbon.css

html, body {height:100%;} 
.wrap_ribbon { 

    position:relative; 
    width:50%; 
    margin: 0px auto ; 

    height:auto !important; 
    height:100%; 
    min-height:100%; 
} 
.contentdiv_ribbon { 
display:block; 
position:fixed; 
margin-top: 200px; 
margin-left: 170px; 
}

center.css

html, body {height:100%;} 
.wrap { 
.center { 
    top: 50%; 
    left: 50%; 
    width: 260px; 
    height: 50px; 
    position: absolute; 
    margin-top: -25px; 
    margin-left: -130px; 
} 
}

正如你可以正確地注意到，這裏的爛攤子代碼，對不起。我是新來的CSS和其他網絡的東西，只是在四處徘徊。任何改進將不勝感激。

UPD。新增我的頁面http://jsfiddle.net/7xZLM/5/

來源

2014-04-07 im_infamous

使用jsfiddle這樣的問題 –

「應該彼此鄰接」的含義？ –

@TilwinJoy，意思是他們應該沒有差距地融合在一起。 –

很難知道你在問什麼。這聽起來像你想要彼此相鄰的2 divs。如果是這樣，你想在CSS看float。

simplified example

CSS

.col1 { 
    float: left; 
}

HTML

<div class='bold col1'> foo</div> 
<div class='col2'>footext</div>

來源

2014-04-07 18:28:18 EnigmaRM

據我所見，一個評論選項澄清問題下方的權利... –

@TJ，真的嗎？什麼時候發生的？（。）（。）jk。我很清楚這一點。正如你所看到的，其他人也被同樣的事情弄糊塗了，OP還沒有迴應。所以我刺殺了他的問題。他表示，他是CSS的新手，「浮動」並不是很多人本能的選擇。 – EnigmaRM

試試這個：

<head> 
<style> 
.main { 
    margin: 0 auto; 

} 
.column { 
    float: left; 
    width: 40%; 
    text-align: center; 

} 
</style> 
</head> 
<body> 
<div class="main"> 
<div class="column">DIV 1</div> 
<div class="column">DIV 2</div> 

</div> 
</body>

點擊JSFiddle

來源

2014-04-07 18:29:12 Dextere

絕對定位的元素相對於具有比靜態其他位置上的第一父定位，如果沒有在那裏它會被相對於初始容器定位，<html>

在你的代碼.wrap沒有一個定位的父所以它會相對於文件定位，最高：50％'將定位格50％以下的文件上...

更新由於.wrap相對於定位到該文件，它的位置隨高度而變化而功能區將停留在頁面的頂部，從而在它們之間產生空間。將它們包裝在定位的父級中將解決此問題。

檢查這個JSFiddle

，從我的理解，你需要的.wrap看起來像它從帶出來，爲您可以用比色帶.wrap施加z-index少，

如在這Updated JSFiddle

來源

2014-04-07 18:38:56

感謝您的回覆。但是有沒有辦法把兩個這個div放在一起，這樣看起來就像一個沒有間隙的元素？我明白，這個絲帶更小，但這不是重點。 –