0
我想根据列设置基于网页的基本布局（尝试使用框架，但他们有太多的东西，我宁愿编码我自己），但我在解决问题。我有一个容器，里面有4个div，彼此分开。其中一个具有标题和导航菜单的全宽度。其他三个人分享一行宽（1 25％1 50％1 25％），但由于某种原因，当我把这些值（注意我使用左浮动），它假定它没有空间（最右边列），并在左下方。我试图使用24％，只是为了这一列，但接着出现一个小幅度，就好像有足够的空间。CSS divs定位问题
的index.html
<!DOCTYPE html>
<html lang = "en">
<head>
<link href="/css/basic.css" rel="stylesheet">
<link href="/css/stylesheet.css" rel="stylesheet">
<meta charset = "utf-8">
<title>Martin Carrasco's Web</title>
<meta name="description" content="Programmer/Coder for hire"/>
<meta name="keywords" content="programmer, coder, developer, hire"/>
<meta http-equiv="author" content="Martin Carrasco"/>
</head>
<body>
<div class="container">
<div class="col-12">
<h1>Martin Carrasco <br> </h1>
<h1 class="s">Programmer for hire</h1>
<ul>
<!--Add links to the pages the point -->
<li>Home</li>
<li>About Me</li>
<li>Contact</li>
<li>Services</li>
<li>State of </li>
</ul>
</div>
<div class="col-3">
<div class="progress-bar">
<span style="width: 10%"><span></span></span>
</div>
</div>
<div class="col-6">
<div class="progress-bar">
<span style="width: 10%"><span></span></span>
</div>
</div>
<div class="col-3 last">
<div class="progress-bar">
<span style="width: 10%"><span></span></span>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
stylesheet.css中
body
{
font-family: "Courier New", Courier, monospace;
}
ul
{
width: 800px;
height: 50px;
margin-left: 275px;
margin-top: 30px;
margin-bottom: 100px;
text-transform: uppercase;
font-weight: bolder;
text-align: center-left;
border-bottom: 2px solid black;
border-top: 5px solid black;
}
li
{
font-size: 18px;
display: inline-block;
border: 1px solid black;
margin-top: 10px;
margin-left: 30px;
margin-right: 30px;
}
h1
{
width: 300px;
height: 50px;
text-align: center;
margin-left: 500px;
border: 2px solid black;
}
h1.s
{
margin-top: -10px;
margin-left: 550px;
height: 25px;
width: 200px;
font-size: 16px;
font-weight: medium;
border: 2px solid black;
font-style: italic;
font-family: "Times New Roman", Times, serif;
}
.col-12
{
border: 2px solid black;
}
.col-3
{
border: 2px solid black;
}
.col-6
{
border: 2px solid black;
}
basic.css
.container
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.col-12
{
width: 100%;
}
.col-3
{
width: 25%;
float: right;
}
.col-6
{
width: 50%;
float: left;
}
.last
{
margin-right: 0px;
}
.progress-bar
{
height: 20px;
position: relative;
background: #555;
border-radius: 25px;
padding: 10px;
box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
}
.progress-bar > span
{
display: block;
height: 100%;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43,194,83);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
}
html
{
margin: 0px;
padding:0px;
border:0px;
}
试.COL-3 {宽度：23％;} –
是的，我们试图用youe代码创建的小提琴是歪曲的。请在网上添加它，以便我们可以检查 –
列的总宽度= 100％（内容框）+ 12px（边框）。所以他们不适合。 – Alohci