Question

我必须做一个推荐部分，在这里我要显示在两个列中垂直堆叠的div。请检查以下代码。我得到的结果非常接近，但是由于div被分配了float属性，因此它们不能忍受紧随其后的下一个div，并且打印了多余的空间。

请检查给出的URL。 https://codepen.io/parvezdgn/pen/oNNXevL

下面是标记和CSS，我正在使用：

@if(auth()->user()->is_admin)
            <div class="upload-btn-wrapper">
                <a class="btn-file">upload_image</a>
                <input type="file" name="image_name" />
            </div>
 @endif

body {
  font: normal 12px 'arial'
}

.container {
  width: 70%;
  margin: 0 auto;
}

.testimony-item {
  width: 50%;
  float: left;
}

.testimony {
  margin: 0 20px 25px;
  border-bottom: 2px solid #ff2b58;
  padding-bottom: 20px;
}

.testimony strong {
  display: block;
}

.stu-details {
  padding: 15px;
  background: #ddd;
  position: relative;
  margin-top: 20px;
}

.stu-details i {
  position: absolute;
  top: -45px;
  right: 15px;
}

我需要做些什么更改来解决它？

谢谢， P

Answer 1

如果我理解是真的，也许是这样??

使用FlexBox。

    body{font:normal 12px 'arial'}
.container{width:70%; margin: 0 auto;display: flex; flex-direction:row; flex-wrap: wrap; align-items: flex-end;}
.testimony-item{flex-basis:50%; box-sizing: border-box;}
.testimony{margin:0 20px 25px; border-bottom:2px solid #ff2b58; padding-bottom:20px;}
.testimony strong{display: block;}
.stu-details{padding:15px; background: #ddd; position:relative; margin-top: 20px;}
.stu-details i{position:absolute; top:-45px; right:15px;}

<div class="container">
    <div class="testimony-item">
        <div class="testimony">
      <p>text</p>
      <div class="stu-details">
        <strong>text</strong>
        <small>text</small>
      </div>
    </div>
    </div>
    <div class="testimony-item">
      <div class="testimony">
      <p>text</p>
      <div class="stu-details">
        <strong>text</strong>
        <small>text</small>
      </div>
    </div>
    </div>
    <div class="testimony-item">
      <div class="testimony">
      <p>text</p>
      <div class="stu-details">
        <strong>text</strong>
        <small>text</small>
      </div>
    </div>
    </div>
</div>

如何在垂直对齐的两列中对齐div？

1 个答案: