<html lang="en">
<meta charset="utf-8" />
<head>
<title>Example Page</title>
<link rel="stylesheet" type="text/css" href="Web_Design_01_Stylesheet.css" />
</head>
<body>
<div id="container">
<header>
<div id="static_nav">
<nav class='navbar'>
<a href="#block_two">Home</a>
<a href="#block_three">About Us</a>
<a href="#end_block">Contact Us</a>
<a href="#block_four">Events</a>
<a href="Member Login">login</a>
</nav>
</div>
</header>
<div id="block_two">
<p></p>
</div>
<div id="block_three">
<div id="column-center">
<header>
Column center
</header>
</div>
<div id="column-left">
<header>
Column left
</header>
</div>
<div class="column-right">
<header>
Column right
</header>
</div>
</div>
<div id="block_four">
<p> Block Four </p>
</div>
<div id="end_block">
<footer<p>This is where the footer would go</p>
</footer>
</div>
</div>
</body>
</html>
这是CSS
html {
overflow: hidden;
}
body {
height: 100%;
width: 100%;
max-width: 100%;
overflow-y: auto;
overflow-x: hidden;
margin: 0;
}
div#static_nav{
font-family: Verdana, sans-serif;
padding-top: 10px;
text-align: right;
width: 100%;
height: 7vh;
background-color: #3A3D3F;
position:fixed;
opacity: .90;
color: red;
vertical-align: middle;
}
div#static_nav a{
color: white;
text-decoration: none;
}
.navbar {
padding-right: 20px;
padding-top: 10px;
}
div#container {
margin-top: 10px
height: 10vh
width: 100%;
background-color: #16BA81;
color:;
}
div#block_two{
background-color: ;
padding-top: 10px;
height: 100vh;
background-image: url(sample_image.png);
background-size: cover;
}
div#block_three{
padding-top: 10px;
height: 100vh;
background-color: #FFFFFF;
padding-left: 10px;
}
以下是我想在#block_three中排成一行的以下各列。我认为宽度的33％可以解决问题，但是一个div列（右列）总是被推到其他列的下方。
div#column-left{
float: left;
width: 33%;
}
div#column-right{
float: right;
width: 33%;
}
div#column-center{
display: inline-block;
width: 33%;
}
div#block_four{
padding: 10px;
height: 100vh;
background-color: #FFFFFF;
}
div#end_block{
padding: 10px;
background-color: #3A3D3F;
height: 50vh;
}
最佳答案
尝试添加以下设置：
* {
box-sizing: border-box;
}
html {
margin: 0;
}
您在块上的左填充为10px，其中的列未计入总宽度，因此这可能是造成问题的原因。上面的第一条规则有望解决此问题。
编辑/添加：
我只是注意到您在那些列上浮动设置-不好... ;-)
将它们全部更改为
float-left并将其在HTML代码中的顺序更改为“左/中/右”，以简单地将它们从左向右浮动（内联代码块在这里不起作用）div#column-left {
float: left;
width: 33%;
}
div#column-right {
float: left;
width: 33%;
}
div#column-center {
float: left;
width: 33%;
}
关于html - 尝试在div包装器中构建三个相邻的div列。 div列的宽度相等，但一列总是被推到其他两列之下，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40558534/