使用DIV

时间：2017-01-11 07:25:35

标签： html css layout

我有一个网页，目前顶部有一个导航栏。我一直在尝试在导航栏下创建一个布局，例如：

Layout

现在左边将是一个“按钮”，但实际上只是一个用来做某事的DIV。只有一个“正确”的占位符实际上包含文本，其余的将是空白的。

我的问题是我无法像图片中那样创建此布局。我得到的最接近的是左右两边的“行”，现在它们之间有间距。

目前我的代码是：

<!doctype html>
<html lang=''>

<head>

  <meta charset='utf-8'>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Josh Schweigert - Contact</title>

  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  <script src="https://s3.amazonaws.com/menumaker/menumaker.min.js" type="text/javascript"></script>
  <script src="script.js"></script>
  <script src="contact.js"></script>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="contact.css">

</head>


<body>

  <div id="cssmenu">

    <ul>

      <li><a href="index.html" target="_self">Home</a>
      </li>
      <li><a href="embedded.html">Embedded Systems</a>
      </li>
      <li class="active"><a href="#">Contact</a>
      </li>

    </ul>

  </div>


</body>

</html>

请注意，格式化将被搞砸，因为我没有包含CSS代码。

我试过制作一个“outter”div并且在div里面有“容器”div，然后为“left”设置一个div，为“right”设置一个div，就像这样：

#outter {
  Position: Relative;
}
.container {
  position: relative;
}
.left {
  float: left;
  width: 30%;
}
.right {
  float: left;
  width: 70%;
}
<div id="outter">
  <div class="container">
    <div class="left">
      left
    </div>

    <div class="right">
      right
    </div>
  </div>

  <div class="container">
    <div class="left">
      left
    </div>

    <div class="right">
      right
    </div>
  </div>

  <div class="container">
    <div class="left">
      left
    </div>

    <div class="right">
      right
    </div>
  </div>

</div>

但我仍然没有得到我想要的结果，我对如何实现这种布局感到非常困惑。我感谢任何帮助！

4 个答案:

答案 0 :(得分：1)

首先请确保您的HTML结构正确无误。此外，我对您的代码进行了更改，以获得您在此处所需的对齐方式。

你需要这样的东西：

.navbar {
  background-color: #5983ff;
  height: 35px;
  width: 100%;
  text-align: center;
  margin-bottom: 15px;
}
.navbar-child {
  width: 30%;
  display: inline-block;
  color: #fff;
  font-size: 16px;
  line-height: 35px;
}
.container {
  margin-bottom: 15px;
  height: 30px;
  line-height: 30px;
  border:2px solid #dd00ff;
}
.left {
  float: left;
  padding-left: 20px;
  width: 15%;
  color: #fff;
  background-color: #dd00ff;
  box-sizing: border-box;
}
.right {
  float: left;
  padding-left: 50px;
  width: 85%;
  color: #fff;
  background-color: #ff0000;
  box-sizing: border-box;
}
<div class="navbar">
  <div class="navbar-child">
    Home
  </div>
  <div class="navbar-child">
    About
  </div>
  <div class="navbar-child">
    Contact
  </div>
</div>

<div class="body-section">
  <div class="container">
    <div class="left">
      Left
    </div>
    <div class="right">
      Right
    </div>
  </div>
  <div class="container">
    <div class="left">
      Left
    </div>
    <div class="right">
      Right
    </div>
  </div>
  <div class="container">
    <div class="left">
      Left
    </div>
    <div class="right">
      Right
    </div>
  </div>
  <div class="container">
    <div class="left">
      Left
    </div>
    <div class="right">
      Right
    </div>
  </div>

</div>

答案 1 :(得分：1)

我通过对您的代码进行以下更改来实现此目的：

  • 删除了不必要的position: relative;语句。在这种情况下，他们没有做任何事情。
  • 删除花车
  • 将.left和.right更改为display: inline-block;
  • 删除了div之间的空格，因为内联块对空格敏感。

然而，这可能不是最好的解决方案，因为它不清楚你的最终目标是什么。如果想法是将左列作为垂直导航栏，那么您希望包含在其自己的元素中，而将主要内容包含在另一个中。但同样，我不清楚设计的意图是什么，所以我尽可能少地做了。

盒子大小和其他样式只是美化，所以你可以看到代码的确如你的图像所示。

＆＃13;
＆＃13; 
div {
  box-sizing: border-box;
}

.left
{
  width: 30%;
  display: inline-block;
  background-color: purple;
  color: #fff;
  padding: 15px;
} 
.right
{
  width: 70%;
  display: inline-block;
  background-color: red;
  color: #fff;
  padding: 15px;
}
＆＃13; 
<div id="outter">
  <div class="container">
    <div class="left">
      left
    </div><div class="right">
      right
    </div>
  </div>
  
  <div class="container">
    <div class="left">
      left
    </div><div class="right">
      right
    </div>
  </div>
  
  <div class="container">
    <div class="left">
      left
    </div><div class="right">
      right
    </div>
  </div>
  
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

试试这个：

      <div class="container">
        <div class="left">
          left
        </div>
<!--Remove this space -->    
        <div class="right">
          right
        </div>
      </div>

答案 3 :(得分：0)

您可以flex使用box-sizing: border-box：

    .wrap{
      display: flex;
      flex-wrap: wrap;
      }

    nav, section, aside{
        padding: 0.5rem;
      }

    nav{
      width: 100%;
      background: yellowgreen;
      display:flex;
      justify-content: space-around;
      }


    aside{
      width: 30%;
      background: blueviolet;
      box-sizing: border-box;
    }

    section{
      min-width: 70%;
      background: pink;
      box-sizing: border-box;
    }
    <div class="wrap">
    <nav> 
        <div>Home</div>
        <div>Forum</div>
        <div>Contact</div>
    </nav>
      
        <aside>left</aside>
        <section>right</section>
        <aside>left</aside>
        <section>right</section>
        <aside>left</aside>
         <section>right</section>
      
    </div>

width: 100%提供nav全宽，flex warp让其他项目在其下，box-sizing可让您给出左右的确切宽度

您可以在flex了解更多信息。

我的post也可以帮助您理解

相关问题
最新问题