Question

我似乎无法让三个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>

Answer 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. */
}

预览

不能将三个div内联，而不会进入下一行

1 个答案: