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