Не удается сохранить три встроенных раздела без перехода на следующую строку

#html #css

#HTML #css

Вопрос:

Кажется, я не могу заставить три раздела оставаться встроенными. Третий всегда переходит на другую строку. Я пробовал отображать встроенный блок, оставленный float в оболочке, я пробовал изменять размеры разделов и несколько других вещей, и я не могу заставить это работать. Я не нашел другого вопроса о переполнении стека, который мог бы решить мою проблему. Вот 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>

Ответ №1:

В CSS этого нет float: center . Вам нужно указать этот способ:

 .p2 {
  right: 60%;
  float: left;                   /* Change this as well. */
  background-color: white;
  padding: 10px;
  width: 30%;
  height: 300px;
  margin: 0 5px;                 /* And add the margin. */
}

Предварительный просмотр: