首页 \ 问答 \ 如何在div之间建立垂直线?(How can I make a vertical line between divs?)

如何在div之间建立垂直线?(How can I make a vertical line between divs?)

我想在我的div之间建立一条垂直线。 我想我的线条适合div的整个高度,我无法做到这一点。 我已尝试过右边界,下边界的边界左边。

这是我的结果

右边框 在此处输入图像描述

下一个div的边界左边 在此处输入图像描述

有人可以告诉我实现这个目标的最佳方法吗?

提前致谢。


<style type="text/css">


 .panel {
  border-radius: 0px !important;
  background-color: #4D8FCB;
  color: white;
  margin-left: 25px;
  margin-right: 25px;

}

.panel-heading {
  height: 114px;

}

.panel-body {
  font-size: 10px;
  background-color: white;
}


.sa-h1 {
  color: white;
  font-size: 39px;
  font-weight: bold;
  font-style: normal;
  font-family: "adelle-sans", sans-serif;
}

.sa-h2{
  font-size: 28px;
}

.sa-h3{
  font-size: 16px;
}
.sa-h4{
  font-size: 14px;
}

.sa-h5{
  font-size: 12px;
}

.sa-h6{
  font-size: 10px;
}


.sa-right-items{
  float: left;
  /*line-height: 114px;*/
}

.sa-answer, .sa-score, .sa-review, .sa-report {
  vertical-align: middle;
  display: inline-block;
  padding: 5px 22px;
}


</style>


<br><br>

<div class="row student-accordion ">
  <div class="col-md-12">
    <div class="panel-group" id="accordion">
      <div class="panel">
        <div class="row panel-heading">
          <div class="panel-title">

           <div class="col-xs-1 sa-section"  >

            <p><span class="sa-h5">SECTION</span>
              <br>
              <span id="sa-section-num" class="sa-h1">2.2</span>
              <br><span class="sa-h5">EXERCISE</span>
            </p>
          </div>


          <!-- Title -->
          <div class="col-xs-6 col-lg-6" style="border-left: 2px solid white;" >
            <span class="sa-h3">Section Exercise 2.2</span><br>
            <span class="sa-h5">ALGEBRA 1</span> <br>
            <span class="sa-h4">02/09/2015</span>

          </div>

          <!-- Answers -->
          <div class="sa-right-items text-center">
           <span class="sa-answer">
            <span> <span class="sa-h2">11/25</span> <br> <span class="sa-h6">ITEMS ANSWERED <br> CORRECTLY</span> </span>
          </span>


          <!-- Score -->
          <span class="sa-score">
           <span> <span class="sa-h2">44%</span> <br> <span class="sa-h6">SCORE</span> </span>
         </span>


          <!-- Review -->
         <span class="sa-review">
          <img width="40px" src="/BIM/resources/images/icons-report/review_white.png"><br>
          <span> <span class="sa-h6">REVIEW</span> </span>
        </span>


        <!-- Report -->
        <span class="sa-report">
          <span  data-toggle="collapse" data-parent="#accordion" href="#student-accordion-collapse"  class="pull-right">
            <img width="40px" src="/BIM/resources/images/icons-report/report_white.png"><br>
            <span> <span class="sa-h6">VIEW REPORT</span> </span>
          </span>
        </span>

      </div>
    </div>


  </div>
  <div id="student-accordion-collapse" class="panel-collapse collapse">
    <div class="panel-body">

     Contents

   </div>
 </div>
</div>

</div>
</div>
</div>

的jsfiddle


I'm trying to make a vertical line between my div. I want to my line to fit the whole height of the div, I couldn't get to do that. I've tried border-right, and border-left of the next div.

Here is my my results

border-right enter image description here

border-left of the next div enter image description here

Can someone please show me the best way to accomplish this ?

Thanks in advance.


CODE

<style type="text/css">


 .panel {
  border-radius: 0px !important;
  background-color: #4D8FCB;
  color: white;
  margin-left: 25px;
  margin-right: 25px;

}

.panel-heading {
  height: 114px;

}

.panel-body {
  font-size: 10px;
  background-color: white;
}


.sa-h1 {
  color: white;
  font-size: 39px;
  font-weight: bold;
  font-style: normal;
  font-family: "adelle-sans", sans-serif;
}

.sa-h2{
  font-size: 28px;
}

.sa-h3{
  font-size: 16px;
}
.sa-h4{
  font-size: 14px;
}

.sa-h5{
  font-size: 12px;
}

.sa-h6{
  font-size: 10px;
}


.sa-right-items{
  float: left;
  /*line-height: 114px;*/
}

.sa-answer, .sa-score, .sa-review, .sa-report {
  vertical-align: middle;
  display: inline-block;
  padding: 5px 22px;
}


</style>


<br><br>

<div class="row student-accordion ">
  <div class="col-md-12">
    <div class="panel-group" id="accordion">
      <div class="panel">
        <div class="row panel-heading">
          <div class="panel-title">

           <div class="col-xs-1 sa-section"  >

            <p><span class="sa-h5">SECTION</span>
              <br>
              <span id="sa-section-num" class="sa-h1">2.2</span>
              <br><span class="sa-h5">EXERCISE</span>
            </p>
          </div>


          <!-- Title -->
          <div class="col-xs-6 col-lg-6" style="border-left: 2px solid white;" >
            <span class="sa-h3">Section Exercise 2.2</span><br>
            <span class="sa-h5">ALGEBRA 1</span> <br>
            <span class="sa-h4">02/09/2015</span>

          </div>

          <!-- Answers -->
          <div class="sa-right-items text-center">
           <span class="sa-answer">
            <span> <span class="sa-h2">11/25</span> <br> <span class="sa-h6">ITEMS ANSWERED <br> CORRECTLY</span> </span>
          </span>


          <!-- Score -->
          <span class="sa-score">
           <span> <span class="sa-h2">44%</span> <br> <span class="sa-h6">SCORE</span> </span>
         </span>


          <!-- Review -->
         <span class="sa-review">
          <img width="40px" src="/BIM/resources/images/icons-report/review_white.png"><br>
          <span> <span class="sa-h6">REVIEW</span> </span>
        </span>


        <!-- Report -->
        <span class="sa-report">
          <span  data-toggle="collapse" data-parent="#accordion" href="#student-accordion-collapse"  class="pull-right">
            <img width="40px" src="/BIM/resources/images/icons-report/report_white.png"><br>
            <span> <span class="sa-h6">VIEW REPORT</span> </span>
          </span>
        </span>

      </div>
    </div>


  </div>
  <div id="student-accordion-collapse" class="panel-collapse collapse">
    <div class="panel-body">

     Contents

   </div>
 </div>
</div>

</div>
</div>
</div>

JSFiddle


原文:https://stackoverflow.com/questions/31116037
更新时间:2020-03-26 12:03

最满意答案

.col-xs-6 col-lg-6删除边框样式,然后:

.col-xs-1 sa-section {
    border-right: 2px solid #fff;
    margin-top: -11px;
    padding-top: 11px;
}

基本上边框将显示在填充内,因此您只需稍微移动容器(使用负边距顶部)并添加一些填充,以便文本显示在同一位置。

您可能希望向容器添加ID并以CSS的方式将其作为目标,而不是定义类的样式。

的jsfiddle


Remove the border style from .col-xs-6 col-lg-6, then:

.col-xs-1 sa-section {
    border-right: 2px solid #fff;
    margin-top: -11px;
    padding-top: 11px;
}

Basically the border will show up within padding, so you just need to move the container up a bit (using a negative margin-top) and add some padding so the text shows up in the same place.

You will probably want to add an ID to the container and target it in CSS that way, instead of defining the styles of the class.

JSFiddle

2015-06-29

相关文章

更多

最新问答

更多
  • css在元素之前中断列而不破坏包装器(css break column before element without breaking the wrapper)
  • 如何在Xamarin共享项目中使用自定义渲染器(How to use Custom Renderer in Xamarin Shared Project)
  • 如何为特定表中的特定字段设置唯一?(How to set unique for specific field from specific table?)
  • Google SDK iOS - sign()方法完成处理程序(Google SDK iOS - sign() method completion handler)
  • 在具有接口{}值的地图上实现String()(Implement String() on a map with interface{} values)
  • 检查数据库中是否已存在用户名(Check if username already exist in DB)
  • 使用javascript进行ajax调用时阻止用户交互(Block user interaction while doing ajax call using javascript)
  • 什么'if(err)'在Javascript中精确测试?(What does 'if (err)' tests precisely in Javascript?)
  • jQuery mouseleave无法正常工作(jQuery mouseleave not working)
  • 寻求使用的一些说明(Seeking some clarification on use of )
  • 将数组传递给注释的语法(syntax for passing array to annotation)
  • 用于从两个日期范围之间的文件中提取数据的Shell脚本(Shell script to extract data from file between two date ranges)
  • 元素隐藏但父()没有(Element hides but parent() not)
  • 如何使用Google App Engine Java平台开发web ui(How to develop web ui with Google App Engine Java platform)
  • 对于OWL A级;(For an OWL class A; Getting all properties that A is their domain)
  • Excel VBA公式格式问题(Excel VBA Formula Format Issue)
  • ORA - 02287序列号不允许在这里(ORA - 02287 sequence number not allowed here)
  • Github拉忽略特定文件(Github Pull Ignore Specific File)
  • SQL CONVERT函数在SQL Server中工作但不在应用程序中(SQL CONVERT function working in SQL Server but not in application)
  • backbone.js适用于大型应用程序(backbone.js for large applications)
  • 防止程序关闭(Preventing program from closing)
  • 生成不带图像的heightMap(Generating a heightMap without an Image)
  • Bootstrap - 如何将包含文本的div居中?(Bootstrap - How to center div that has text inside it?)
  • Android - 片段findViewById()总是null?(Android - Fragment findViewById() always null?)
  • 确定CSS中的高度(Figuring out heights in CSS)
  • 使用__autoload包含类和使用命名空间(Use __autoload to include class and use namespace)
  • setTimeout()不允许我传递文本值[重复](setTimeout() doesn't allow me to pass text values [duplicate])
  • 在NSUserDefault中恢复值(Restoring value in NSUserDefault)
  • 知道如何将这种下沉的悬停效果添加到图像/链接吗?(Any idea how to add this sinking hover effect to an image/link?)
  • 在XIB中淡入/淡出UISegmentedControl(fade in/fade out UISegmentedControl in XIB)