I am new to making websites so I started creating one just for practice but I already came across a problem. I cannot get the 3 .mainContain div's to be next to each other inside the container. I already tried setting them as inline-block and already tried floating them left and clearing them; the width is also a small enough size to make them all fit.
我是一个新创建网站，所以我开始创建一个只是为了练习，但我已经遇到了一个问题。我无法得到3 . maininclude div在容器内彼此相邻。我已经试着将它们设置为inline-block，并尝试将它们浮动，并清除它们;宽度也小到足以让它们都适合。
Thanks for your help.
谢谢你的帮助。
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>1 个解决方案
#1
1
Try floating them all to the left to get them to align next to each other. https://jsfiddle.net/LLztwjmg/
试着把它们都移到左边，让它们对齐在一起。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;
}
#1
1
Try floating them all to the left to get them to align next to each other. https://jsfiddle.net/LLztwjmg/
试着把它们都移到左边，让它们对齐在一起。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;
}