个人中心
gpt4 book ai didi

html - 使用 flex 使具有不同行数的列具有相同的高度

转载 作者：太空宇宙 更新时间：2023-11-04 10:29:48 26 4
gpt4 key购买 nike

我正在尝试使用 Bootstrap 获得此视觉布局:

enter image description here

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

.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%;
}
<!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>

最佳答案

这是解决方案。检查下面的代码:

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

关于html - 使用 flex 使具有不同行数的列具有相同的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36578582/

26 4 0
文章推荐： linux - 我们如何才能灵活地为 Google App Engine 更改操作系统？或者我们可以这样做吗？
文章推荐： python - pylint 1.4 中的 "parameter unpacking"错误是什么？
文章推荐： linux - 使用 LFTP 回显当前文件传输
文章推荐： python - python 和 nltk 的 Utf-8 问题
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com