Question

在下面的标记中，这些左右Flexbox容器是可滚动的，以便用户可以比较细节。

我需要一种能够使同一索引处的子元素具有相同高度的方法，即使它们的内容不同。

例如，2个地址div应具有相同的高度。

我可以用javascript做到这一点但是只用css可以吗？

* {
  box-sizing: border-box;
}

div,
main {
  border: 1px solid red;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  height: 100vh;
}

main {
  height: 100%;
  flex: 1 1 0;
  display: flex;
}

.row {
  display: flex;
  flex: 1;
}

.col {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  display: flex;
}

.container {
  display: flex;
  flex: 1;
}

.container {
  display: flex;
}

.container .left,
.container .right {
  flex: 1;
  height: 100%;
  overflow: auto;
}

main .row:first-child {
  height: 100%;
}

<html>

  <body>

    <header>Header</header>

    <main>
      <div class="row">
        <div class="col container">
          <div class="left">
            <div class="name">
              <strong>Name</strong> BoB Smith</div>
            <div class="address">
              <strong>Address</strong>
              <p>21</p>
              <p>Somewhere Street</p>
              <p>Somewhere City</p>
              <p>That Country</p>
              <P>BWERE EREWW</P>
            </div>
            <div>
              <strong>Something else</strong>
              <ul>
                <li>One</li>
                <li>Two</li>
                <li>Three</li>
                <li>Four</li>
                <li>Five</li>
                <li>Six</li>
                <li>Seven</li>
                <li>Eight</li>
                <li>Nine</li>
                <li>Ten</li>
              </ul>
            </div>
          </div>
          <div class="right">
            <div class="name">
              <strong>Name</strong> BoB Smith</div>
            <div class="address">
              <strong>Address</strong>
              <p>21</p>
              <p>Somewhere Street</p>
            </div>
            <div>
              <strong>Something else</strong>
              <ul>
                <li>One</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </main>
  </body>

</html>

Answer 1

解决方案1 

您可能需要更改HTML结构。你需要一张桌子： http://jsfiddle.net/GCu2D/3566/

Title

解决方案2

使用现有布局并指定宽度： https://jsfiddle.net/7z9y7pw2/

如果是，那么您可以添加此代码，例如：

// Declare the query string
var queryString = "<View Scope='RecursiveAll'><Query><Where><or>";

// For each filename, append a new <eq> element containing the relevant details
foreach (var filename in fileNames) { 
    // Process string here, eg check if its in the db or whatever you need to do
    queryString += $"<Eq><FieldRef Name='FileLeafRef'/><Value>{filename}</Value></Eq>";
}

// Append the closing tags of the rest of the query
var queryString += "</or><Where></Query></View>";

这仅用于表示，您可以根据您的选择更改CSS规则值。

Answer 2

这是我的解决方案：

主要思想是设置两个div（具有地址类）的父级来显示flex。

<html>
    <head>
    <style>
        * {
  box-sizing: border-box;
}

div,
main {
  border: 1px solid red;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  height: 100vh;
}

main {
  height: 100%;
  flex: 1 1 0;
  display: flex;
}

.row {
  display: flex;
  flex: 1;
}

.address {
    flex-grow: 1;
}

.first {
    display:flex;
}

.second {
    display:flex;
}



main .row:first-child {
  height: 100%;
}
    </style>
    </head>
  <body>

    <header>Header</header>

    <main>
      <div class="row">
        <div class="col container">
          <div class="first">

            <div class="address">
            <div class="name">
              <strong>Name</strong> BoB Smith</div>
              <strong>Address</strong>
              <p>21</p>
              <p>Somewhere Street</p>
              <p>Somewhere City</p>
              <p>That Country</p>
              <P>BWERE EREWW</P>
            </div>
             <div class="address">
             <div class="name">
              <strong>Name</strong> BoB Smith</div>
              <strong>Address</strong>
              <p>21</p>
              <p>Somewhere Street</p>
            </div>         
          </div>       
        </div>
      </div>
    </main>
  </body>

</html>

两个独立的flexbox儿童，相同的身高，没有javascript

2 个答案: