html - 我该怎么做才能获得相同的列高?

标签 html css flexbox bootstrap-4

<分区>

我尝试使用 flex,但列高仍然不相同,并且 w3schools 和 medium 中提到的一些方法没有用。第一次使用 flex 方法有效,但当我再次刷新时它消失了,我不明白为什么会这样。

这段代码有什么问题吗?请帮我解决这个问题。

<html>
<head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <title>Bootstrap Page</title>
    <style>
        p{
            background:rgba(25,105,25,0.4);
            color:white;
         }
        .row{
            display: flex;
            flex-wrap: wrap;
        }
        .row > .col-md-6 {
            display: flex;
            flex-direction: column;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row display-flex">
            <div class="col-md-6 para1">
                <div>
                    <p>M. Best who informed him that locomotives 
                       could be obtained at a railroad boneyard in Mérida, Yucatán, Mexico, owned by the Ferrocarriles Unidos de Y
                       ucatán..</p>
                </div>
            </div>
            <div class="col-md-6 para1">
                <div>
                    <p> Best who informed him that locomotives 
                            could be obtained at a railroad boneyard in mer, went to Mérida in 1969 to investigate.The development er, went to Mérida in 1969 to investigate.The developme
                        nt of the Walt Disney World Railroad from the late 1960s to its opening in 1971 was overseen by Roger E. Broggie,
                         vice president and general manager of Mapo, Inc</p> 
                </div>
            </div>
        </div>
    </div>
</body>

output image

最佳答案

这是一个稍微清理过的版本。我为类添加了不同颜色的边框,以便您可以看到事物是如何相互作用的。

p {
  background-color: rgba(25, 105, 25, 0.4);
  color: white;
  border: 1px solid green;
  box-sizing: border-box;
  padding: 10px;
}

.container {
  border: 1px solid red;
}

.row {
  border: 1px solid blue;
}

.div {
  border: 1px solid orange;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <title>Bootstrap Page</title>

</head>

<body>
  <div class="container d-flex">
    <div class="row d-flex">
      <div class="col-6 d-flex align-items-stretch">
        <p>M. Best who informed him that locomotives could be obtained at a railroad boneyard in Mérida, Yucatán, Mexico, owned by the Ferrocarriles Unidos de Y ucatán..
        </p>
      </div>
      <div class="col-6 d-flex align-items-stretch">
        <p> Best who informed him that locomotives could be obtained at a railroad boneyard in mer, went to Mérida in 1969 to investigate.The development er, went to Mérida in 1969 to investigate.The developme nt of the Walt Disney World Railroad from the
          late 1960s to its opening in 1971 was overseen by Roger E. Broggie, vice president and general manager of Mapo, Inc
       </p>
      </div>
    </div>
  </div>
</body>

关于html - 我该怎么做才能获得相同的列高?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49479556/

上一篇:html - 在 anchor 上使用 :hover Action 后是否可以与::交互?

下一篇:CSS 网格悬停是 "shuffeling"

相关文章:

css - 订购供应商前缀的正确方法是什么?

html - 为什么我的 svg 没有在 div 容器中居中?

html - grid-column-end 属性留下空白区域

html - 部分图像覆盖在响应式 View 中

ruby-on-rails - 升级到 Ruby on Rails 3.1 : How to solve image loading issues in CSS files?

css - 在具有设置宽度侧边栏的布局中水平滚动 flexbox 中的列表

html - 悬停时平行四边形倾斜

javascript - HTML/Jquery 如何限制子 div 的数量?

javascript - 如何在一个人停止输入后调用一个函数?

java - 在 glassfish 上的哪里存储图像、CSS 和 javascript 文件?