Css 如何安排两个相邻的分区？_Css_Html_Webpage

Css 如何安排两个相邻的分区？

css html

Css 如何安排两个相邻的分区？,css,html,webpage,Css,Html,Webpage,因此，问题相当明显。现在我在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/htm

因此，问题相当明显。现在我在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>

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和其他web内容，只是随便看看。如有任何改进，将不胜感激

UPD。添加了我的页面

很难知道你在问什么。听起来您需要两个相邻的

div

。如果是这样的话，那么您需要看看CSS

CSS

HTML

foo
足迹

试试这个：

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


梅因先生{
保证金：0自动；
}
.栏目{
浮动：左；
宽度：40%；
文本对齐：居中；
}
第一组
第2组

单击

绝对定位的元素相对于第一个父元素定位，该父元素的位置不是静态的，如果没有，则将相对于初始容器定位，

在您的代码中，

.wrap

没有定位父对象，因此它将相对于文档定位，top:50%`将div 50%定位在文档顶部下方

更新由于

.wrap

是相对于文档定位的，因此它的位置会随着页面高度的变化而变化，而功能区将停留在页面顶部，从而在它们之间产生空间。将它们包装在定位的父对象中可以解决此问题

检查这个

据我所知，您需要.wrap看起来像是从功能区中出来的，因此您可以将小于功能区的

z-index

应用到

.wrap

正如在这篇文章中所说的那样，使用JSFIDLE来回答这样的问题“应该彼此邻接”的意思是什么？@TilwinJoy，意思是它们应该不间断地结合在一起。请详细解释你的问题。垂直装配/水平装配？@im_臭名昭著不这么简单有什么特别的原因吗？为什么所有的空div和css垃圾邮件…？据我所知，在问题的正下方有一个用于澄清的注释选项…@TJ，哦，真的吗？那是什么时候发生的？jk。我很清楚这一点。正如你所看到的，其他人也被同样的事情弄糊涂了&OP还没有回应。所以我试着解决他的问题。他表示自己是CSS新手，很多人本能地不会接受浮动。谢谢你的回复。但是有没有办法把两个div放在一起，这样它看起来就像一个没有间隙的元素？我知道，这条丝带比较小，但这不是重点。

.col1 {
    float: left;
}

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

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