我似乎无法让三个div保持内联。第三个总是去另一条线。我试过显示内联块,在包装器上向左浮动,我尝试改变div的大小和其他几个东西,我不能让它工作。我还没有找到可以解决我的问题的另一个堆栈溢出问题。继承人html和css。
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin:0;
padding:0;
background-image: url("download.png");
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 20px;
text-decoration: none;
float: left;
}
li a:hover {
background-color: #111111;
}
.blue {
position:absolute;
width:100%;
float:right;
background-color:#62ADDB;
height:5px;
}
.body {
background-color: white;
width: 100%;
height: 600px;
position: absolute;
font-family: 'Roboto', sans-serif;
}
.tdes {
font-size: 1.2em;
}
.des {
background-color: #D0DAE0;
width: 100%;
padding: 30px;
width: 100%;
position: absolute;
}
.profilePic {
border-radius: 50%;
width: 30%
}
.p1 {
right: 30%;
float: left;
background-color: white;
padding: 10px;
width: 30%;
height: 300px;
}
.p2 {
right: 60%;
float: center;
background-color: white;
padding: 10px;
width: 30%;
height: 300px;
}
.p3 {
right: 0%;
float: right;
background-color: white;
padding: 10px;
width: 30%;
height: 300px;
}
a {
text-decoration: none;
}
.des a:link{
color: #000000;
}
.inline {
display:inline;
}
</style>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<ul>
<li><a href="">Minds Gaming</a></li>
<li><a href="https://www.minds.com/MindsGaming"> MG Channel</a></li>
<li><a href=""> 18+</a></li>
<li><a href="">Contact us</a></li>
</ul>
<div class="blue"></div>
<br />
<br />
<div class="body"><center>
<div class="des">
<br />
<h2>
Welcome to the MindsGaming Community!
</h2>
<p class="tdes">
The #1 Community on Minds, We have the best open groups and members!
<br />Make sure to check out as many groups and fun members you can!
</p>
<br /> <br /> <br />
Our supporters:
<br /><br /><br />
<div class="p1">
<img class="profilePic" src="test.png">
<br />
@channel
<br /> <br />
Description about person
</div>
<div class="p2">
<img class="profilePic" src="test.png">
<br />
@channel
<br /> <br />
Description about person
</div>
<div class="p3">
<img class="profilePic" src="test.png">
<br />
@channel
<br /> <br />
Description about person
</div>
</center>
</div>
</div>
</body>
</html>