Question

所以，这个问题相当明显。现在我在div容器中有两个元素，它们应该相互邻接，但由于缺乏css技能，我需要你的帮助。所以，代码相当原始。

  <!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/

Answer 1

试试这个：

<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

Answer 2

很难知道你在问什么。听起来你想要2 divs坐在一起。如果是这样，您就想要在CSS中查看float。

<强> simplified example

CSS

.col1 {
    float: left;
}

HTML

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

Answer 3

绝对定位的元素相对于具有静态位置的第一个父元素定位，如果没有，它将相对于初始容器<html>

定位

在您的代码中.wrap没有定位父级，因此它将相对于文档定位，top：50％`将div放在文档顶部50％以下。 ..

<强>更新由于.wrap相对于文档定位，因此其位置随页面高度而变化，而功能区将保留在页面顶部，从而在它们之间产生空间。将它们包装在定位的父级中将解决问题。

检查此JSFiddle

根据我的理解，您需要.wrap看起来像是从功能区中出来的，因为您可以将z-index小于功能区应用到.wrap，

，如此Updated JSFiddle

如何安排两个相互邻接的div？

3 个答案: