CSS divs定位问题

时间：2016-02-15 07:26:03

标签： html css

我正在尝试基于列设置网页的基本布局（尝试使用框架，但是它们中有太多东西，我宁愿自己编写代码）但是我总结了一个问题。我有一个容器，内部4个div彼此分开。其中一个具有标题和导航菜单的全宽。其他三个被要求共享一行宽度（1 25％1 50％1 25％），但由于某种原因，当我把这些值（注意我使用浮动左）时，它假设它没有空间（最右边的一列）并在左下方。我尝试仅使用24％作为该列，但稍后会出现一小部分，就好像有足够的空间。

的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;
}

1 个答案:

答案 0 :(得分：1)

试试这个：

<!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>
<style>
    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;
    }

.container
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.col-12
{
  width: 100%;
}
.col-3
{
  width: 25%;
  float: left;
}
.col-6
{
  width: 49.1%;
  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;
}</style>
   <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>
相关问题
最新问题