gpt4 book ai didi

css - 如何安排两个相邻的div?

转载 作者:太空宇宙 更新时间:2023-11-04 13:37:42 27 4
gpt4 key购买 nike

那么,这个问题就很明显了。现在我在 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;
}

中心.css

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

正如您正确注意到的那样,这里的代码一团糟,对此深表歉意。我是 CSS 和其他网络内容的新手,只是四处闲逛。如有任何改进,我们将不胜感激。

更新。添加了我的页面 http://jsfiddle.net/7xZLM/5/

最佳答案

试试这个:

<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

关于css - 如何安排两个相邻的div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22919784/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com