Question

我想要实现这样的布局：

但是它不能正常工作，我得到的是：http://jsfiddle.net/9cfqjmkb/。标题应与图像顶部对齐，但不起作用。你知道为什么吗？

我也想在图像和带有标题和发布日期的另一个div之间留出一定的空白，就像上面的图像中那样，但是该空白不起作用。你知道为什么吗？

HTML

basics<-c(8,12,16:18,23,56)
basicsndvi<-c(8,12,16:18,23,56,65,66)
volumes<-c(8,12,16,17,18,23,57:62,56)
volumesndvi<-c(8,12,16,17,18,23,57:62,56,65,66)
numbersNSEW<-c(8,12,16:18,23,42:45,56)
numbersNSEWndvi<-c(8,12,16:18,23,42:45,56,65,66)
all<-c(4,5,6,8,12,16:18,23,57:62,42:46,56)
allndvi<-c(4,5,6,8,12,16:18,23,57:62,42:46,56,65,66)

variables <- list(basics, basicsndvi, volumes, volumesndvi, numbersNSEW, 
numbersNSEWndvi, all, allndvi)

variables_used <- c("basics", "basicsndvi", "volumes", "volumesndvi", 
"numbersNSEW", "numbersNSEWndvi", "all", "allndvi")

// Here, I want to obtain the variable name as a String...
for(variable in variables){
    index = 1  
    ...
    ...
    ...
    outputFile.text <- paste0(parentPath, "/", selectedMethod, "/", 
    variables_used[index],".txt")
    index <- index + 1
}

Answer 1

？

.list-group {
  width:300px;
}

.ml-2 {
  align-self:flex-start;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">


  <div class="row">
    <div class="col-3">
      <div class="bg-custom-light2 p-0">
        <h2 class="font-weight-bold text-custom-blue-dark h5 border-color p-2">Title</h2>
        <ul class="list-group">

          <li class="list-group-item d-flex justify-content-between align-items-center">
            <div>
              <h6 class="font-weight-bold text-custom-blue-dark">Test title example for
                example test post</h6>
              <p>post date date</p>
            </div>
            <img class="ml-2" src="https://via.placeholder.com/50" alt="">
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
            <div>
              <h6 class="font-weight-bold text-custom-blue-dark">Test title example for
                example test post</h6>
              <p>post date date</p>
            </div>
            <img class="ml-2" src="https://via.placeholder.com/50" alt="">
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

将标题与图像对齐，并在图像和内容之间添加边距不起作用

1 个答案: