带有 DIV 的特定布局答案

【问题标题】：Specific Layout With DIV's带有 DIV 的特定布局
【发布时间】：2017-01-11 18:25:49
【问题描述】：

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

现在左边将是一个“按钮”，但实际上只是一个用于执行某些操作的 DIV。只有一个“Right”占位符实际包含文本，其余为空白。

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

目前我的代码有这个：

<!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 代码。

我尝试制作一个“外部”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>

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

【问题讨论】：

标签： html css layout

【解决方案1】：

我通过对您的代码进行以下更改来实现这一点：

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

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

box-sizing 和其他样式只是美化，因此您可以看到代码确实按照您的图片中指定的方式布局。

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

<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>

【讨论】：

【解决方案2】：

请先正确设置您的 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>

【讨论】：

只是在我的答案中添加边框并不能解决操作员的问题。

【解决方案3】：

您可以将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，可能会帮助您理解

【讨论】：

【解决方案4】：

试试这个：

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

【讨论】：