我在最左边有一个徽标。中间有一个div容器，最左边有一个div容器。所有这些都打包在一个div容器中。
我有中间容器的边缘：自动;调整后使其两侧的距离相同。
问题是，如果我向左或向右移动徽标，中间的容器也会移动。我如何确保中间的容器无论向左或向右发生什么都始终停留在中间？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Airbnb.com</title>
<style>
body {
margin: 0%;
font-family: Arial, Helvetica, sans-serif;
}
.container1 {
height: 70px;
background-color: #e7e0e0;
display: flex;
justify-content: space-between;
align-items: center;
}
.container12 {
margin-left: 50px;
}
.container12 h1 {
font-size: 20px;
}
.container13 {
margin-right: 25px;
}
.container13 a {
margin: 0%;
text-decoration: none;
color: black;
float: inline-start;
}
.container13 a:hover {
text-decoration: underline;
}
.trennlinie {
border-right: 1px solid grey;
padding-top: 15px;
padding-bottom: 15px;
padding-right: 12.5px;
}
.trennliniehilfe {
padding-left: 12.5px;
padding-top: 15px;
padding-bottom: 15px;
}
.container2 {
height: 80px;
border-bottom: 1px solid rgb(187, 187, 187);
display: flex;
align-items: center;
}
.airbnblogo {
width: 50px;
}
.airbnbcont {
margin-left: 110px;
;
}
.mittecontainer {
display: flex;
margin: auto;
float: inline-start;
background-color: rgb(214, 212, 212);
border: 2px solid black;
border-radius: 15px;
padding-right: 5px;
}
.mittecontainer p {
margin-left: 11.5px;
}
.part3 {
display: flex;
align-items: center;
margin-right: 35px;
}
.derretter {
margin-right: 15px;
}
.interneticon {
margin-right: 15px;
width: 30px;
}
.Pics img {
width: 250px;
vertical-align: middle;
}
.Pics {
display: flex;
justify-content: center;
margin-top: 80px;
border: 2px solid white;
}
.p1 {
border-right: 1px solid grey;
padding-right: 12.5px;
}
.p2 {
border-right: 1px solid grey;
padding-right: 12.5px;
}
.Pics p {
display: flex;
justify-content: center;
}
.pics2 {
background-color: black;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
border-radius: 10px;
}
.pics2 p {
background-color: black;
color: white;
border: 2px solid white;
border-radius: 15px;
padding: 5px;
}
.pics2 p:hover {
background-color: white;
color: black;
}
.ia {
width: 30px;
}
</style>
</head>
<body>
<div class="container1">
<div class="container12">
<h1>Hier kommt das Airbnb 2022: Winter-Update</h1>
</div>
<div class="container13">
<a class="trennlinie" href="">Film abspielen</a>
<a class="trennliniehilfe" href="">Alle Neuigkeiten entdecken</a>
</div>
</div>
<div class="container2">
<div class="airbnbcont">
<img class="airbnblogo" src="airbnb.png" >
</div>
<div class="mittecontainer">
<p class="p1">Irgendwo</p>
<p class="p2">Eine Woche</p>
<p>Gäste hinzufügen</p>
</div>
<div class="part3">
<div class="derretter">
<p>Als Gastgeber:in loslegen</p>
</div>
<div class="interneticon">
<img class="ia" src="internet.png" alt="">
</div>
<div>
<img class="ia" src="menu.png" alt="">
</div>
</div>
</div>
<div class="Pics">
<div class="pics2">
<img src="din1.jpg"> <br>
<p>Jetzt Flug sichern!</p>
<p>Weitere Infos</p>
<p>Standort</p>
</div>
</div>
</body>
</html>
1条答案
按热度按时间zzoitvuj1#
在style标记的.container2类中，将display：弯曲;被显示：网格;并添加网格-模板-列：25%的50%的25%;就像这样
不要忘了如果有太多的css样式，然后做一个外部的css链接，使提供css样式更容易。