使用flex可以获得具有不同行数的列以具有相同的高度

时间：2016-04-12 16:05:26

标签： html css twitter-bootstrap-3 flexbox multiple-columns

我试图使用bootstrap获取此可视化布局：

enter image description here

我遇到了几个问题。所有部分都需要有边框，无论内容如何都需要相同的高度。我应用flex来实现相同的高度，但这会导致左列中的两个div成为彼此相邻的列。 Flex-direction: column不起作用，clear: both或float: none也不起作用。我也试过使用z-index但没有成功。有没有办法在不使用JavaScript / jQuery的情况下执行此操作？这需要查看整页以正确查看问题。

＆＃13;
＆＃13; 
.section {
  border: solid;
  border-width: .115em;
  border-color: #d4d2d0;
  padding-left: 0.938em;
  margin-top: 0.3em;
}
.flex {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
/*************left column*****************/

#lcolumn {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0 0.15em 0 0;
}
#specialties {
  padding-bottom: 3.5%;
}
hr {
  height: .05em;
  width: 50%;
  margin-left: -1em;
  background-color: #d4d2d0;
}
.specialties {
  width: 30%;
}
/*********************** right column************/

#rcolumn {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0 0 0 0.15em;
}
#right-child {
  height: 100%;
  width: 100%;
}
＆＃13; 
<!DOCTYPE html>
<html lang="en">

<head>
  <link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" type="text/css">
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

</head>

<body>
  <div class="container">
    <div class="row flex">
      <div id="lcolumn" class="col-xs-12 col-md-12 col-lg-6">
        <div class="section">

          <p>Bio here. All about me. Content, content, content, content, content, content.</p>
          <p>Paragraph 2. All about me. Content, content, content, content, content, content.</p>
        </div>
        <!--end Hello/bio-->

        <div class="section" id="specialties">
          <h3 class="text-uppercase ">My Specialties</h3>
          <hr>
          <p>Content, content, content, content, content, content.</p>

        </div>
        <!--end my specialties-->
      </div>
      <!---------------------------Right Column--------------------------->
      <div id="rcolumn" class="col-xs-12 col-md-6">
        <div class="section" id="right-child">
          <div>
            <h3 class="text-uppercase ">Education</h3>
            <hr>
            <ul>
              <li>
                <b>Full Stack Web Development / 2013</b>
                <br>
                <span class="text-uppercase">Palm Beach </span> 
              </li>
              <br>
              <li>
                <b>Master of Science |  / 2013</b>
                <br>
                <span class="text-uppercase"> College /  , New York</span> 
              </li>
              <br>
              <li>
                <b>Bachelor of Arts | music / 2007</b>
                <br>
                <span class="text-uppercase">Western </span> 
              </li>
            </ul>
          </div>
          <!--end education-->

          <div>
            <h3 class="text-uppercase ">Languages and Skills</h3>
            <hr>
            <ul>
              <li><span>HTML</span>
              </li>
              <li><span>CSS</span>
              </li>
              <li><span>Bootstrap</span>
              </li>
              <li><span>Materialize</span>
              </li>
              <li><span>JavaScript</span>
              </li>
              <li><span>JQuery</span>
              </li>
              <li><span>AngularJS</span>
              </li>
              <li><span>PHP</span>
              </li>
              <li><span>MySQL</span>
              </li>
              <li><span>WordPress</span>
              </li>
              <li><span>Photoshop</span>
              </li>
            </ul>
          </div>
          <!--end languages-->
        </div>
      </div>
      <!--end education & languages-->
    </div>
    <!--end .row--->
  </div>
  <!--end .container-->

</body>

</html>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

这是解决方案。 检查以下代码：

.section {
  border: solid;
  border-width: .115em;
  border-color: #d4d2d0;
  padding-left: 0.938em;
  margin-top: 0.3em;
}
.flex {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
/*************left column*****************/

#lcolumn {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 0 0.15em 0 0;
}
#lcolumn > .section:first-child {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
}
#specialties {
  padding-bottom: 3.5%;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
hr {
  height: .05em;
  width: 50%;
  margin-left: -1em;
  background-color: #d4d2d0;
}
.specialties {
  width: 30%;
}
/*********************** right column************/

#rcolumn {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  padding: 0 0 0 0.15em;
}
#right-child {
  height: 100%;
  width: 100%;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />


<div class="container">
  <div class="row flex">
    <div id="lcolumn" class="col-xs-12 col-md-12 col-lg-6">
      <div class="section">

        <p>Bio here. All about me. Content, content, content, content, content, content.</p>
        <p>Paragraph 2. All about me. Content, content, content, content, content, content.</p>
      </div>
      <!--end Hello/bio-->

      <div class="section" id="specialties">
        <h3 class="text-uppercase ">My Specialties</h3>
        <hr>
        <p>Content, content, content, content, content, content.</p>

      </div>
      <!--end my specialties-->
    </div>
    <!---------------------------Right Column--------------------------->
    <div id="rcolumn" class="col-xs-12 col-md-6">
      <div class="section" id="right-child">
        <div>
          <h3 class="text-uppercase ">Education</h3>
          <hr>
          <ul>
            <li>
              <b>Full Stack Web Development / 2013</b>
              <br>
              <span class="text-uppercase">Palm Beach </span>
            </li>
            <br>
            <li>
              <b>Master of Science |  / 2013</b>
              <br>
              <span class="text-uppercase"> College /  , New York</span>
            </li>
            <br>
            <li>
              <b>Bachelor of Arts | music / 2007</b>
              <br>
              <span class="text-uppercase">Western </span>
            </li>
          </ul>
        </div>
        <!--end education-->

        <div>
          <h3 class="text-uppercase ">Languages and Skills</h3>
          <hr>
          <ul>
            <li><span>HTML</span>
            </li>
            <li><span>CSS</span>
            </li>
            <li><span>Bootstrap</span>
            </li>
            <li><span>Materialize</span>
            </li>
            <li><span>JavaScript</span>
            </li>
            <li><span>JQuery</span>
            </li>
            <li><span>AngularJS</span>
            </li>
            <li><span>PHP</span>
            </li>
            <li><span>MySQL</span>
            </li>
            <li><span>WordPress</span>
            </li>
            <li><span>Photoshop</span>
            </li>
          </ul>
        </div>
        <!--end languages-->
      </div>
    </div>
    <!--end education & languages-->
  </div>
  <!--end .row--->
</div>
<!--end .container-->

答案 1 :(得分：0)

你需要嵌套flexboxes。

左栏需要flex-direction:column，每个内部div需要flex:1才能将div扩展到最大尺寸。

Codepen Demo

＆＃13;
＆＃13; 
.section {
  border: solid;
  border-width: .115em;
  border-color: #d4d2d0;
  padding-left: 0.938em;
  margin-top: 0.3em;
  flex: 1;
}
.flex {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
/*************left column*****************/

#lcolumn {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0 0.15em 0 0;
}
#specialties {
  padding-bottom: 3.5%;
}
hr {
  height: .05em;
  width: 50%;
  margin-left: -1em;
  background-color: #d4d2d0;
}
.specialties {
  width: 30%;
}
/*********************** right column************/

#rcolumn {
  display: flex;
  fleX: 1;
  padding: 0 0 0 0.15em;
}
#right-child {
  height: 100%;
  width: 100%;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row flex">

    <div id="lcolumn" class="col-xs-12 col-md-12 col-lg-6">
      <div class="section">

        <p>Bio here. All about me. Content, content, content, content, content, content.</p>
        <p>Paragraph 2. All about me. Content, content, content, content, content, content.</p>
      </div>
      <!--end Hello/bio-->

      <div class="section" id="specialties">
        <h3 class="text-uppercase ">My Specialties</h3>
        <hr>
        <p>Content, content, content, content, content, content.</p>

      </div>
      <!--end my specialties-->
    </div>
    <!---------------------------Right Column--------------------------->
    <div id="rcolumn" class="col-xs-12 col-md-6">
      <div class="section" id="right-child">
        <div>
          <h3 class="text-uppercase ">Education</h3>
          <hr>
          <ul>
            <li>
              <b>Full Stack Web Development / 2013</b>
              <br>
              <span class="text-uppercase">Palm Beach </span> 
            </li>
            <br>
            <li>
              <b>Master of Science |  / 2013</b>
              <br>
              <span class="text-uppercase"> College /  , New York</span> 
            </li>
            <br>
            <li>
              <b>Bachelor of Arts | music / 2007</b>
              <br>
              <span class="text-uppercase">Western </span> 
            </li>
          </ul>
        </div>
        <!--end education-->

        <div>
          <h3 class="text-uppercase ">Languages and Skills</h3>
          <hr>
          <ul>
            <li><span>HTML</span>
            </li>
            <li><span>CSS</span>
            </li>
            <li><span>Bootstrap</span>
            </li>
            <li><span>Materialize</span>
            </li>
            <li><span>JavaScript</span>
            </li>
            <li><span>JQuery</span>
            </li>
            <li><span>AngularJS</span>
            </li>
            <li><span>PHP</span>
            </li>
            <li><span>MySQL</span>
            </li>
            <li><span>WordPress</span>
            </li>
            <li><span>Photoshop</span>
            </li>
          </ul>
        </div>
        <!--end languages-->
      </div>
    </div>
    <!--end education & languages-->
  </div>
  <!--end .row--->
</div>
<!--end .container-->
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

在纯css中未能解决此问题后，我编写了一个jQuery来完成同样的事情。我现在使用它作为后备，因为并非所有浏览器都支持Flex。我在这里发帖给任何有兴趣的人。

//get heights 

var lHeight = $('#hello').outerHeight(true) + $('#specialties').outerHeight(true);

var rHeight = $('#right-child').outerHeight(true);

var tallest = Math.max(lHeight, rHeight);

//make smaller column height of tallest

if (rHeight < tallest) {
    $('#right-child').css('height', tallest - 4);

} else {
    $('#specialties').css('height', tallest - $('#hello').outerHeight(true) - 4);
}
相关问题
最新问题