Question

我有一个要解决的问题，而又不固定我的身高。我正在为按钮使用Bootstrap 4。

我的HTML的结构如下：1个div包含2个div（左和右），左包含短文本，并且右在柔性显示屏中包含5个（或更多）按钮。右在各列中显示按钮（因为我想要它），但是它不包装内容，因此增加了左和右以将所有按钮放入一列。

我想要的是将全局高度固定为左的高度，并且右应该通过将我的按钮放在2列中来适应该高度。我唯一的解决方案是手动修复div的高度，该方法可以正常工作，但是我敢肯定有一种更好的方法。

这里是HTML和CSS的简化代码，我也有codepen（如果您想最后看一下我想要的内容，请评论我的身高）：https://codepen.io/julianlecalvez/pen/dwEoax

.gray-inner-block {
  margin-top: 40px;
  background-color: #f2f2f2;
  padding: 40px;
}

#mybuttons {
  display: flex;
}

#mybuttons .inner-block {
  width: 50%;
}

#mybuttons .right-block {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  /* 	height: 150px; */
}

#mybuttons .right-block div {
  width: 150px;
  height: 40px;
  margin-bottom: 10px;
  flex-basis: 0;
}

.inner-block .maintitle {
  font-size: 30px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.inner-block .subtitle {
  font-size: 20px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div id="mybuttons" class="gray-inner-block buttons buttonsout">
  <div class="inner-block left-block">
    <div class="maintitle">Use these buttons to maipulate the interface</div>
    <div class="subtitle">Each button can be use independently</div>
  </div>
  <div class="inner-block right-block">
    <div>
      <a class="btn btn-primary" role="button">Bouton 1</a>
    </div>
    <div>
      <a class="btn btn-primary" role="button">Bouton 2</a>
    </div>

    <div>
      <a class="btn btn-primary" role="button">Bouton 3</a>
    </div>

    <div>
      <a class="btn btn-primary" role="button">Bouton 4</a>
    </div>
    <div>
      <a class="btn btn-primary" role="button">Bouton 5</a>
    </div>
  </div>
</div>

Answer 1

基于对如何完成布局的描述，我假设以下内容：

#mybuttons的高度完全取决于左栏中文本内容的高度
右列中的内容不应指示其父对象的高度，而仅在必要时将其内容包装到子列中

如果这是所需的布局，则只需将右列中的所有内容包装在另一个<div>中，该位置绝对要占据为右列分配的所有区域。这具有将所有内容都从流中移出的效果，这意味着它们不再对#mybuttons的高度有任何影响。

它看起来像这样：

<div id="mybuttons" class="gray-inner-block buttons buttonsout">
  <div class="inner-block left-block">
    <!-- Left block content here -->
  </div>
  <div class="inner-block right-block">
    <!-- The div below is to be absolutely positioned relative to its parent -->
    <div class="right-block-content">
      <!-- Right block content here -->
    </div>
  </div>
</div>

请牢记这一点，然后可以将最初应用于.right-block的所有flexbox样式移至.right-block-content，它应该可以工作：

.gray-inner-block {
  margin-top: 40px;
  background-color: #f2f2f2;
  padding: 40px;
}

#mybuttons {
  display: flex;
}

#mybuttons .inner-block {
  width: 50%;
}

#mybuttons .right-block {
  position: relative;
}

#mybuttons .right-block-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

#mybuttons .right-block-content div {
  width: 150px;
  height: 40px;
  margin-bottom: 10px;
  flex-basis: 0;
}

.inner-block .maintitle {
  font-size: 30px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.inner-block .subtitle {
  font-size: 20px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div id="mybuttons" class="gray-inner-block buttons buttonsout">
  <div class="inner-block left-block">
    <div class="maintitle">Use these buttons to maipulate the interface</div>
    <div class="subtitle">Each button can be use independently</div>
  </div>
  <div class="inner-block right-block">
    <div class="right-block-content">
      <div>
        <a class="btn btn-primary" role="button">Bouton 1</a>
      </div>
      <div>
        <a class="btn btn-primary" role="button">Bouton 2</a>
      </div>

      <div>
        <a class="btn btn-primary" role="button">Bouton 3</a>
      </div>

      <div>
        <a class="btn btn-primary" role="button">Bouton 4</a>
      </div>
      <div>
        <a class="btn btn-primary" role="button">Bouton 5</a>
      </div>
    </div>
  </div>
</div>

Answer 2

如果使用flex，则需要高度才能使flex-wrap起作用。另一种方法是将列宽添加column-width: 153px;到#mybuttons .right-block中。根据需要调整宽度。谢谢。

Answer 3

尝试使用此CSS（添加的媒体查询）：

.gray-inner-block {
    margin-top: 40px;
    background-color: #f2f2f2;
    padding: 40px;
}  
#mybuttons {
    display: flex;
}
#mybuttons .inner-block {
    width: 50%;
}
#mybuttons .right-block {
    margin-left: 50px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 150px;
}
#mybuttons .right-block div {
    width: 150px;
    height: 40px;
    margin-bottom: 8px;
    flex-basis: 0;
}
.inner-block .maintitle {
    font-size: 30px;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.inner-block .subtitle {
    font-size: 20px;
}

@media only screen and (max-width:670px){
    #mybuttons .right-block {
        height: 1500px;
    }
    #mybuttons .right-block div {
        margin: 0 0 20px 50px;
    }
}

只需要调整高度，我想它就可以了。

基于最小高度div的CSS div等于高度

3 个答案: