CSS-如何在浏览器中央放置一个div而不移动其他div
我正在尝试设计索引页，现在我执行了以下代码： HTML：
<body>
<header>
<div class="Header_container">
<a href="me">
<img class="Logo" alt="Logo" src="CITYGAMEUR_LOGO.png">
</a>
<div class="Header_options">
<a class="Accueil" href="me">ACCUEIL</a>
<div class="DropDown">
<a class="Gaming" href="#">GAMING</a>
<div class="Contenu">
<a href="classement">CLASSEMENT</a>
<a href="ranks">RANKS</a>
<a href="events">EVENTS</a>
<a href="annonces">ANNONCES</a>
</div>
</div>
<div class="DropDown">
<a class="Account" href="#">COMPTE</a>
<div class="Contenu">
<a href="parametres">PARAMÈTRES</a>
<a href="deconnexion">DÉCONNEXION</a>
</div>
</div>
</div>
</div>
</header>
<section>
<div class="Body_container">
<div class="UserInfo">
<span class="HeyFonsi">HEY USERNAME</span>
<img class="UserAvatar" src="https://api.habbocity.me/avatar_image.php?user=WeiredAF&headonly=0&direction=2&head_direction=2&size=l" alt="UserAvatar">
<p class="IfMember Text">- Tu n'es pas un membre de l'organisation.</p>
<p class="UserRank Text">- Rank : Aucun.</p>
<p class="UserClassement Text">- Classement : Aucun.</p>
<p class="UserLevel Last Text">- Ton level gaming : Inconnu.</p>
</div>
<div class="OrganiInfo">
<div class="Where">
<span class="Text">Tu peux nous retrouver sur : </span>
<center><a href="https://www.habbocity.me"><img class="CityLogo" alt="CITY" src="CITY.png"></a></center>
</div>
<div class="JoinOrgi">
<div class="Header">
<img class="Locked" alt="locked" src="LOCKED.png">
<span class="Text">GAMEUR CITY</span>
</div>
<div class="Main">
<center><img class="Logo" src="CITYGAMEUR_LOGO.png" alt="Logo"></center>
<p class="Members">Membres : xx</p>
<a class="Options" href="https://www.habbocity.me">Aller au QG du Groupe</a>
<a class="Options" href="contact">Contacter les membres</a>
<button class="JoinOrgiButton">Demande d'adhésion</button>
</div>
</div>
</div>
</div>
<footer>
<div class="Footer_line"></div>
<span class="Footer_copyright">CITY GAMEUR 2018.<br/>CMS fait de zéro par .</span>
</footer>
</section>
</body>
和CSS：
/* HEADER */
header .Header_container {
height: 75px;
background: #242424;
border-bottom: 7px solid #2e2e2e;
padding: 5px 15px 0px 15px;
}
header .Logo{
position: relative;
width: 60px;
height: 63px;
display: inline-block;
}
header .Logo:hover{
transform: rotate(-15deg);
transition: 1s ease;
}
header .Header_options{
position: relative;
display: inline-block;
float: right;
top: 15px;
}
header a{
color: #e8e8e8;
text-decoration: none;
font-size: 34px;
padding: 40px;
}
header .DropDown{
position: relative;
display: inline-block;
width: 200px;
}
header .Contenu{
display: none;
position: absolute;
z-index:1;
background: #3f3f3f;
border-left: 7px solid #2e2e2e;
border-right: 7px solid #2e2e2e;
border-bottom: 7px solid #2e2e2e;
border-radius: 0px 0px 10px 10px;
padding: 0 15px 0 15px;
margin-top: 15px;
transform: translateY(15px);
}
header .Contenu a{
display: block;
padding: 10px;
text-align: center;
}
header .DropDown:hover .Contenu{
display: block;
}
header .Gaming{
text-decoration: underline;
color: turquoise;
}
/* USERINFO */
section .UserInfo{
margin: 0;
background: #2a2a2a;
border-right: 7px solid #2e2e2e;
left: 0;
text-align: center;
width : 220px;
padding: 15px;
display: inline-block;
z-index: 1;
}
section .UserInfo .HeyFonsi{
font-size: 30px;
text-decoration: underline;
font-weight: bold;
}
section .UserInfo .Text{
font-size: 21px;
margin-bottom : 50px;
}
/* ORGANI INFO */
section .OrganiInfo{
margin: 0;
background: #2a2a2a;
border-left: 7px solid #2e2e2e;
float: right;
text-align: center;
display: block;
z-index: 1000000;
width : 250px;
}
/* OPTIONS */
/* WHERE */
section .Where{
border-bottom: 7px solid #2e2e2e;
padding: 25px;
}
section .Where .Text{
font-size: 26px;
display: block;
margin-bottom: 30px;
}
section .Where .CityLogo{
display: block;
transform: translateX(-10px);
}
/* JOIN ORGI */
section .JoinOrgi{
padding: 30px 20px 30px 20px;
}
section .JoinOrgi .Header .Text{
font-size: 26px;
text-decoration: underline;
margin-left: 10px;
}
section .JoinOrgi .Header .Locked{
transform: translateY(5px);
}
section .JoinOrgi .Main .Logo{
width: 113px;
height: 118px;
margin-top: 20px;
margin-bottom: 10px;
}
section .JoinOrgi .Main .Members{
font-size: 22px;
text-decoration: underline;
}
section .JoinOrgi .Main .Options{
display: block;
padding-bottom: 15px;
color: #dadada;
}
section .JoinOrgi .Main .JoinOrgiButton{
margin-top: 30px;
font-size: 16px;
font-family: 'Inconsolata', monospace;
padding: 10px 30px;
border-radius: 5px;
}
footer{
padding-bottom: 50px;
text-align: center;
background: #3f3f3f;
}
footer .Footer_line{
height: 7px;
background: #2e2e2e;
}
footer .Footer_copyright{
display: block;
margin-top: 25px;
font-size: 30px;
text-shadow: 0 5px 30px black;
}
它给出了这样的内容：
我想在这两个div之间插入一个div（右一个和左一个div）（所以在中间），我尝试了一些方法，但它总是使右div移动。我不想使用绝对位置或网格。
我想要这样的东西（我是用photoshop完成的）：
对不起，我的英语不好，谢谢。
2 个答案:
答案 0 :(得分：2)
您可以浮动div以使它们彼此相邻。请参见下面的示例：
.left-div { float:left; width:10%; height:100px; background:green; }
.center-div {float:left; width:80%; height:100px; background:blue; }
.right-div { float:left; width:10%; height:100px; background:green; }<div class="left-div"></div>
<div class="center-div"></div>
<div class="right-div"></div>
我给了他们一些高度，以确保它们的外观和颜色使divs有所不同。如果删除高度，则div中没有内容，因此不会显示。这也是响应性的：因此，如果您更改屏幕的with，它们仍将适合屏幕并变小。
使用浮点数时，请务必清除。可以通过在三个div周围添加一个div并将其命名为“ clearfix”并使用以下CSS来完成此操作：
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden; }
答案 1 :(得分：0)
您也可以通过使用display：flex和justify-content：space-between实现。请检查以下代码并输出。
.Body_container {
display: flex;
justify-content: space-between;
}
.UserInfo {
margin: 0;
background: #2a2a2a;
border-right: 7px solid #2e2e2e;
left: 0;
text-align: center;
width: 20%;
padding: 15px;
display: inline-block;
z-index: 1;
}
.middle-content {
width: 80%;
}
.OrganiInfo {
margin: 0;
background: #2a2a2a;
border-left: 7px solid #2e2e2e;
text-align: center;
display: block;
z-index: 1000000;
width: 20%;
}<div class="Body_container">
<div class="UserInfo">
<span class="HeyFonsi">HEY USERNAME</span>
<img class="UserAvatar" src="https://api.habbocity.me/avatar_image.php?user=WeiredAF&headonly=0&direction=2&head_direction=2&size=l" alt="UserAvatar">
<p class="IfMember Text">- Tu n'es pas un membre de l'organisation.</p>
<p class="UserRank Text">- Rank : Aucun.</p>
<p class="UserClassement Text">- Classement : Aucun.</p>
<p class="UserLevel Last Text">- Ton level gaming : Inconnu.</p>
</div>
<div class="middle-content"><h3>What is Lorem Ipsum</h3>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div class="OrganiInfo">
<div class="Where">
<span class="Text">Tu peux nous retrouver sur : </span>
<center><a href="https://www.habbocity.me"><img class="CityLogo" alt="CITY" src="CITY.png"></a></center>
</div>
<div class="JoinOrgi">
<div class="Header">
<img class="Locked" alt="locked" src="LOCKED.png">
<span class="Text">GAMEUR CITY</span>
</div>
<div class="Main">
<center><img class="Logo" src="CITYGAMEUR_LOGO.png" alt="Logo"></center>
<p class="Members">Membres : xx</p>
<a class="Options" href="https://www.habbocity.me">Aller au QG du Groupe</a>
<a class="Options" href="contact">Contacter les membres</a>
<button class="JoinOrgiButton">Demande d'adhésion</button>
</div>
</div>
</div>
</div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？