Question

我是html中的新手并尝试垂直找到一个网页，并绘制垂直线，但无法找到我找到的大多数是初始化宽度50％和50％或其他东西。如下。

<div id="left" style="float:left; width:15%;" > This is left panel </div>
<div id="right" style="float:left; width:85%;"> This is right panel </div>

但是，我想在两个面板之间画一条垂直线。

我该怎么做？感谢

修改

＆＃13;

.head {
  background-image: url(../img/internet-of-things-ionicframework.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  ##background: #000;
  padding: 50px 0;
  min-height: 500px;
  position: relative;
}

.head-content {
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
}

.head-content h2 {
  color: #000;
  font-size: 60px;
}

.head-content p {
  color: #000;
  font-size: 40px;
  margin-bottom: 30px;
}

.head-content .btn {
  border-radius: 2px;
  padding: 20px 30px;
}

main {
  min-height: 500px;
  padding: 50px 0;
}

footer {
  padding: 30px 0;
  font-size: 14px;
  color: #888;
  background: #222;
  text-align: center;
}

body {
  font-size: 18px;
  line-height: 1.5;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Welcome</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="/stylesheets/styles.css">
</head>

<body>
  <header>
    <nav class="navbar navbar-inverse">
      <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#" id="deploy">Deploy</a></li>
        </ul>
      </div>
    </nav>
  </header>
  <div id="container" style="width:100%;">
    <div id="left" style="float:left; width:15%;"> This is left panel </div>
    <div id="right" style="float:left; width:85%;"> This is right panel </div>
  </div>
</body>

</html>

＆＃13;

Answer 1

您可以使用calc()并关注css

div#container {
  height: calc(100vh - 70px);
  float: left;
}
#left,
#right {
  box-sizing: border-box;
  height: 100%;
}
#right{
  border-left:1px solid;
}

.head {
  background-image: url(../img/internet-of-things-ionicframework.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background: #000;
  padding: 50px 0;
  min-height: 500px;
  position: relative;
}

.head-content {
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
}

.head-content h2 {
  color: #000;
  font-size: 60px;
}

.head-content p {
  color: #000;
  font-size: 40px;
  margin-bottom: 30px;
}

.head-content .btn {
  border-radius: 2px;
  padding: 20px 30px;
}

main {
  min-height: 500px;
  padding: 50px 0;
}

footer {
  padding: 30px 0;
  font-size: 14px;
  color: #888;
  background: #222;
  text-align: center;
}

body {
  font-size: 18px;
  line-height: 1.5;
}
div#container {
    height: calc(100vh - 70px);
    float: left;
}
#left,
#right {
  box-sizing: border-box;
  height: 100%;
}
#right{
  border-left:1px solid;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<header>
  <nav class="navbar navbar-inverse">
    <div class="collapse navbar-collapse" id="navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#" id="deploy">Deploy</a></li>
      </ul>
    </div>
  </nav>
</header>
<div id="container" style="width:100%;">
  <div id="left" style="float:left; width:15%;"> This is left panel </div>
  <div id="right" style="float:left; width:85%;"> This is right panel </div>
</div>

Answer 2

#left{
  height:100vh;
  border-right:1px solid black;
  display:inline-block;
  box-sizing:border-box;
}

#right{
  height:100vh;
  display:inline-block;
}

<div id="left" style="float:left; width:15%;" > This is left panel </div>
<div id="right" style="float:left; width:85%;"> This is right panel </div>

Answer 3

您想将页面分成两部分，中间有一行吗？试试这段代码：

＆＃13;

* {
  margin:0;
  border:none;
  padding:0;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

html {
  height:100%;
}

body {
  min-height:100%;
}

.content {
  width:100%;
  height:100%;
  position:relative;
  display:table;
}

.sided-section {
  width:50%;
  height:100%;
  position:relative;
  display:table-cell;
}

.section-line {
  position:absolute;
  width:4px;
  height:100%;
  background:black;
  left: 50%;
  margin-left: -2px; /*Half size of width*/
  z-index:999;
}

.section-content {
   width:100%;
   height:100%;
   padding:4px; /*Recomended to the section-line don't overlay the content*/
}

.right-section {
  background:lightcoral;
}

.left-section {
  background:lightblue;
}

＆＃13;

<div class="content">
  
  <div class="section-line"></div>
  
  <section class="sided-section right-section">
    <div class="section-content">
      <p>
        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat
      </p><br>
      
      <p>
        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat
      </p><br>

      <p>
        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat
      </p><br>

      <p>
        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat
      </p> 
      <img src="https://unsplash.it/200/300/?random" alt="Image Right"/>     
    </div>
  </section>

  <section class="sided-section left-section">
    <div class="section-content">
      <p>
        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat
      </p>
      <img src="https://unsplash.it/200/300/?random" alt="Image Right"/>
    </div>      
  </section>

</div>

＆＃13;

您还可以查看JsFiddle上的代码。您可以使用较少的组件创建解决方案，但会减少控制。

如何垂直分页与在html中绘制一条垂直线

3 个答案: