Question

我目前遇到的问题是并排两个<div>并完全匹配height。我需要它们两个height的原因是因为右<div>包含一个class，它将left-vertical border应用于我们需要不间断地看到的<div>。如果左vertical border垂直扩展，但右边没有，我们有一个<div>，它不会在display: table的行之间运行垂直间隙的长度。

我们尝试了多种解决方案，其中一种使用display: table-row，display: table-cell和vertical border。您可以在下面看到该配置。

JSFiddle #1 of the issue

我们主要关心的是让background color持续运行，以便我们不会留下空隙，如图所示。 Vertical Gap Image

我们还考虑过设置vertical border等于border颜色，并基本上使用margin创建CSS。

我们上面的整个文档以大致相似的方式布局，在.column2, .column3 { float: left; margin-bottom: 30px; } .column2 { width: 45%; margin-bottom: 0 !important; padding-top: 3px; padding-bottom: 3px; } .column3 { width: 30.7%; } .column2, .column3 { min-width: 190px; padding-left: 20px; } .column2:first-of-type, .column3:first-of-type { padding-left: 0; } .left-vertical-border { border-left: 1px solid #BFB9B9; height: 100%; } .table-wrapper { display: table; padding-left: 20px; width: 100%; } .table-row-wrapper { display: table-row; } .table-cell { display: table-cell; } <div class="table-wrapper"> <div class="table-row-wrapper"> <div class="column2 table-cell">question text</div> <div style="display: table-cell;" class="column2 left-vertical-border">textanswer text answer</div> </div> </div> <div class="table-wrapper"> <div class="table-row-wrapper"> <div class="column2 table-cell">question textquestion textquestion textquestion textquestion textquestion textquestion textquestion text</div> <div class="column2 left-vertical-border table-cell">textanswer text answer</div> </div> </div> <div class="table-wrapper"> <div class="table-row-wrapper"> <div class="column2 table-cell">question text</div> <div class="column2 left-vertical-border table-cell">textanswer text answer</div> </div> </div>中创建，没有任何表格。我们希望在这里找到一个不需要重大改写的解决方案。

谢谢！

相关代码

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    let revealGameScene = SKTransition.fade(withDuration: 0.5)
    let goToGameScene = GameScene(size: self.size)
    goToGameScene.scaleMode = SKSceneScaleMode.aspectFill
    self.view?.presentScene(goToGameScene, transition:revealGameScene)
}

Answer 1

摆脱浮动似乎解决了这个问题。

.column2, .column3 {
    /* float: left; */
    margin-bottom: 30px;
}

Answer 2

Flexbox是一个非常强大的解决方案，也摆脱了一堆有趣的标记。由于align-items: stretch是默认值，导致同一行中的项目具有相同的高度（最高项目的高度），它可以完成您想要的任务

＆＃13;

* { box-sizing: border-box; }

.question-wrap {
  display: flex;
  flex-flow: row wrap;
  padding: 0 10px;
}

.question {
  flex: 0 0 45%;
}

.answer {
  flex: 0 0 55%;
  border-left: 1px solid #BFB9B9;
}

.question,
.answer { padding: 10px; }

＆＃13;

<div class="question-wrap">
    <div class="question">question text</div>
    <div class="answer">textanswer text answer</div>

    <div class="question">question textquestion textquestion textquestion textquestion textquestion textquestion textquestion text</div>
    <div class="answer">textanswer text answer</div>

    <div class="question">question text</div>
    <div class="answer">textanswer text answer</div>
 
    <div class="question">question text</div>
    <div class="answer">textanswer text answer</div>

    <div class="question">question textquestion textquestion textquestion textquestion textquestion textquestion textquestion text</div>
    <div class="answer">textanswer text answer</div>

    <div class="question">question text</div>
    <div class="answer">textanswer text answer</div>

    <div class="question">question text</div>
    <div class="answer">textanswer text answer extra long right hand side to show that the vertical border sticks</div>
  </div>

＆＃13;

并排div不匹配高度

2 个答案: