我正在尝试设计一个索引页面，现在我做了这段代码: 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 移动。我不想使用绝对位置或网格。
我想要这样的东西(我用 photoshop 做了这个):
抱歉我的英语不好，在此先感谢您。
最佳答案
您可以 float 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>我给了它们高度以确保它的显示和颜色以在 div 之间产生差异。如果删除高度，则 div 中没有内容，因此它不会显示。这也是响应式的:因此，如果您更改屏幕的尺寸，它们仍会适合屏幕并且会变小。
使用 float 时，请确保清除。这可以通过在三个 div 周围添加一个 div 来完成，并给它类“clearfix”并使用下面的 css:
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden; }
关于html - CSS - 如何在不移动其他 div 的情况下将一个 div 放在浏览器的中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51307761/