Question

我正在尝试为网站制作团队资料，我想要的是将3个资料均匀地水平显示。

    public List<ArrayList<String>> removeRow(int columnIndex,Set<String> masterData,List<ArrayList<String>> rowColumnData){ 

        List<ArrayList<String>> finalData= new ArrayList<ArrayList<String>>();

        for(ArrayList<String> data: rowColumnData){
            String columnVal=data.get(columnIndex);
            if(masterData.contains(columnVal){
            finalData.add(data);
        }

        return finalData;
    }

现在输出为：

<div>
    <span>
        <img>
        <span></span>
    </span>
    <span>
        <img>
        <span></span>
    </span>
    <span>
        <img>
        <span></span>
    </span>
</div>

预期输出：

<img><span><img><span><img><span>

Answer 1

您可以使用flex或grid。像这样：

div {
  display: flex;
  justify-content: space-evenly;
}

div > span > * { //this is to move the spans below the imgs
  display: block;
}

Answer 2

您可以将每个配置文件放在一个内联div中，并将span设置为一个块元素，例如

img{width:70px;}
span{display:block}
.inline{display:inline-block;}

<div>
  <div class="inline">
    <span>
        <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
        <span>User</span>
    </span>
    </div>
    <div class="inline">
    <span>
        <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
        <span>User</span>
    </span>
    </div>
    <div class="inline">
    <span>
        <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
        <span>User</span>
    </span>
    </div>
</div>

每个div都会包装图像，而用户及其本身都是内联的，并在行中添加另一个div。

如何将元素并排分布？

2 个答案: