Question

我正在尝试创建一个＆＃34;成员列表＆＃34; - ＆GT;多个图片的名称在底部彼此相邻。到目前为止我有这个：

<div class = "members">
    <div class = "member1" style = "display:inline">
        <a href="#"><img src = "head_1.jpg" style = "width: 80px; height: 100px"/></a>
        <a href="#">Member1</a>
    </div>

    <div class = "member2" style = "display:inline">
        <a href="#"><img src = "head_2.jpg" style = "width: 100px; height: 100px"/></a>
        <a href="#">Member 2</a>
    </div>
</div>

我想在<a>标签之间设置一个换行符，但这会在html文件中创建一个换行符，当我希望它向右移动时，会导致下一个div出现在前一个底部的底部它的。

我希望（可能是错误地）输入.css文件：

.members .member1 {
    width: 110px; // or max-width;
}

使格式化强制第二个<a>标记出现在每个成员<div>的第一个df2 = df.pivot(columns="task", index="jobid") df2.end.sub(df2.start.d, axis=0)后面。我怎样才能实现我想要实现的目标？

Answer 1

＆＃13;

.members .member1,.members .member2 {
    width: 110px; // or max-width;
    display: inline-block;
}

＆＃13;

<div class = "members">
    <div class = "member1">
        <a href="#"><img src = "head_1.jpg" style = "width: 80px; height: 100px"/></a>
        <a href="#">Member1</a>
    </div>

    <div class = "member2">
        <a href="#"><img src = "head_2.jpg" style = "width: 100px; height: 100px"/></a>
        <a href="#">Member 2</a>
    </div>
</div>

＆＃13;

Answer 2

试试这个

＆＃13;

.member1 a{
    display:list-item;
    }
    
    .member2 a{
    display:list-item;
    }

＆＃13;

<div class = "members">
    <div class = "member1" style = "display:inline">
        <a href="#"><img src = "head_1.jpg" style = "width: 80px; height: 100px"/></a>
        <a href="#">Member1</a>
    </div>

    <div class = "member2" style = "display:inline">
        <a href="#"><img src = "head_2.jpg" style = "width: 100px; height: 100px"/></a>
        <a href="#">Member 2</a>
    </div>
</div>

＆＃13;

Answer 3

方法1）删除display:inline和.member1的{{1}}并尝试此操作：

.member2

.members .member1, .members .member2 {
    width: 110px;
    display: inline-block;
}

.members .member1, .members .member2 {
    width: 110px;
    display: inline-block;
}

方法2）如果您需要<div class = "members"> <div class = "member1"> <a href="#"><img src = "http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg" style = "width: 80px; height: 100px"/></a> <a href="#">Member1</a> </div> <div class = "member2"> <a href="#"><img src = "http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg" style = "width: 80px; height: 100px"/></a> <a href="#">Member 2</a> </div> </div>，只需添加以下代码：

display:inline

.member1,.member2 {
  float: left;
  width: 110px
}

.member1,.member2 {
  float: left;
  width: 110px
}

在div内部断行但不是html

3 个答案: