如何获得两个宽度相同的div,它们之间有一条垂直线

时间:2014-04-29 03:29:39

标签: css

原则上我只需要照顾FireFox。

对于我的内容,我希望有两个具有相同宽度的div,它们之间的垂直线占据整个高度,底部有20个像素。

我开始了,但正确的div很小,我也不知道如何获得垂直线。

目前我有以下内容:

<?xml version = "1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "nl" lang = "nl">

<html>
  <head>
    <style>
      h1 {
        color:                      #18A5D7;
      }

      html, body {
        height:                     100%;
        margin:                     0px;
      }

      #container {
        background:                 linear-gradient(blue, white);
        height:                     100%;
        margin:                     auto;
        width:                      100%;
      }

      #footer {
        height:                     auto;
        margin:                     auto;
        position:                   relative;
        width:                      100%;
      }

      #main {
        overflow:                   auto;
      }

      .col {
      }

      .row {
        background-color:           white;
        display:                    flex;
        border:                     1px solid black;
        border-radius:              10px;
        margin-left:                50px;
        margin-right:               50px;
      }

      .title {
        font-weight:                bold;
      }

      button.no {
        background:                 #84a0C4;
        border-bottom-right-radius: 10px;
        border-top-right-radius:    10px;
        color:                      #FFFFFF;
      }

      button.yes {
        background:                 #84a0C4;
        border-bottom-left-radius:  10px;
        border-top-left-radius:     10px;
        color:                      #FFFFFF;
      }

      div.block {
        background:                 #E6EBF1;
        border-radius:              15px;
        color:                      #1C589B;
        margin-bottom:              10px;
        padding:                    10px 20px;
      }

      div.content {
        border-style:               solid;
      }

      div.vl {
        border-left:                2px solid grey;
        width:                      0;
        height:                     auto;
      }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script type="text/JavaScript">
      function doResize() {
        var footer_height    = $('#footer').height()
        footer_height       += 2
        $('#footer').css('margin-top', '-' + footer_height + 'px')
        $('#main').css('padding-bottom', footer_height + 'px')
        var footer_position  = $('#footer').offset().top + window.screenY
        var content_position = $('#content').offset().top + window.screenY
        var newHeight        = footer_position - content_position - 2
        var newWidth         = $(document).width() - 100
        $('#content').css({
          'height': newHeight,
          'width':  newWidth
        })
      }
      $(document).ready(function() {
        doResize()
      })
      $(window).resize(function() {
        doResize()
      })
    </script>
  </head>

  <body>
    <div id="container">
        <div id="main">
            <div id="header"><div class="header">
              Header
            </div></div>
            <div class="row">
              <div class="col" id="content">
                <h1>03 Complaints</h1>
                Question one
                <br/><br/>
                Question two
                <br/><br/>
              </div>
<!-- I tried, but it did not work, puts content in the border
              <div class="col vl" >
--->
              <div class="col" >
                Be short, concise and to the point
                <br/>
                Stick to the medical terms
                <br/>
                Questioning
                <br/>
                Stick to the medical terms
              </div>
            </div>
        </div>
    </div>
    <div id="footer"><div class="footer">Footer</div></div>
  </body>
</html>

我需要改变什么?

1 个答案:

答案 0 :(得分:1)

要为两个div提供相同的宽度,您需要添加适用于它们的css class,例如:

div.col {
          width: 50%;
          word-wrap: break-word;
      }

要在它们之间建立垂直线,你需要制作一个div并将它放在两个div之间作为分隔符,如:

//your div 1
    <div id="divider"></div>
//your div 2

并添加一些css以使其看起来是一条垂直线:

#divider {
          width: 2px;
          background: gray;
          height: inherit;
          margin-top: 20px;
          margin-bottom: 20px;
      }

<强> SAMPLE DEMO