我是制作网站的新手，所以我开始创建一个网站只是为了练习，但我已经遇到了一个问题。我无法使3 .mainContain div在容器内彼此相邻。我已经尝试将它们设置为内联块，并且已经尝试将它们向左浮动并清除它们；宽度也足够小，以使它们都适合。
谢谢你的帮助。
body{
background: white;
}
/***********************************
NAV
************************************/
#container{
max-width: 1000px;
margin: 0 auto 0 auto;
width: 100%;
height: 900px;
border: 1px solid black;
}
#nav{
border: 1px solid blue;
width: 90%;
height: 50px;
margin: 0 auto 0 auto;
}
#navholder ul li{
list-style: none;
text-align: center;
}
#navholder ul li a{
text-decoration: none;
float: left;
display: inline-block;
text-align: center;
margin-left: 10px;
}
#navholder{
width: 35%;
height: 40px;
margin: 0 auto 0 auto;
display: block;
border: 1px solid green;
}
/***********************************
MAIN CONTAIN
************************************/
.mainContain{
display: inline-block;
width: 25%;
height: 650px;
float: left;
margin: 10px auto 10px auto;
border: 1px solid red;
}
/***********************************
LEFT
************************************/
#left{
}
/***********************************
CENTER
************************************/
#center{
clear: both;
}
/***********************************
RIGHT
************************************/
#right{
float: right;
}<!DOCTYPE.html>
<html>
<head>
<title>Get Me Coding</title>
<link href="helpwebsite.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
<div id="navHolder">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<!-- this closes the Nav Holder DIV -->
</div>
<!-- this closes the NAV DIV -->
<div id="container">
<section>
<div class="mainContain" id="left">
<div id="leftContainer"></div>
<ul>
<li><a href="#">What To Practice</a></li>
<li><a href="#">Web Pages To Practice</a></li>
<li><a href="#">How did I practice</a></li>
</ul>
</div>
<!-- this closes the first MAIN CONTAIN -->
</div>
<!-- this closes the LEFT DIV -->
<div class="mainContain" id="center"></div>
<!-- this closes the second MAIN CONTAIN -->
<div class="mainContain" id="right"></div>
<!-- this closes the third MAINCONTAIN -->
</section>
</div>
<!-- This closes the container DIV -->
</body>
</html>最佳答案
尝试将它们全部浮动到左侧，以使它们彼此对齐。
https://jsfiddle.net/LLztwjmg/
.mainContain{
display: inline-block;
width: 33%;
height: 650px;
float: left;
margin: 10px auto 10px auto;
border: 1px solid red;
}
/***********************************
LEFT
************************************/
#left{
float:left;
}
/***********************************
CENTER
************************************/
#center{
float:left;
}
/***********************************
RIGHT
************************************/
#right{
float: left;
}
关于html - 无法将3个DIV放在容器内彼此相邻，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31842471/