如何在彼此之下获得2个div?

时间:2017-03-08 15:47:28

标签: html css

像这样:

enter image description here

注意:这是一张桌子,桌子在手机上“没有响应”,因为它没有修复,你需要在手机上横向滚动。很难解释。

这是代码:(没有表格)

真正的问题:你如何得到像桌子一样,只是......没有桌子?

.avatar {
  float: left;
  margin-left: 20px
}

.navn {
  clear: both;
  margin-left: 20px;
  color: white;
  background-color: black;
  width: 184px;
  height: 30px;
  padding: 5px 0;
  text-align: center;
  background-color: #14967c
}
<div class="avatar">
  <a href="https://steamcommunity.com/id/Ullix21" target="_blank">
    <img style="float: left;" src="https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/33/33be922a4e16b1bbb7872ab2a149ca1920276571_full.jpg"></a>
</div>
<div class="avatar">
  <a href="http://steamcommunity.com/id/16BitBacon" target="_blank">
    <img style="float: left;" src="https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/83/83ec24eb38514fe4ed57360d4b656089dba0e280_full.jpg"></a>
</div>
<div class="navn" style="display: inline-block; float:left; vertical-align: top;">Ullix</div>
<div class="navn" style="display: inline-block; vertical-align: top;">Wombo</div>

3 个答案:

答案 0 :(得分:0)

这个怎么样。

.navm放在.avatar内。在我的代码中,我删除了.navm类,并在我的CSS中使用.avatar>div

名称显示在图像下方,但位于同一个div中。因此,在调整屏幕尺寸时,它们总是保持在彼此之下。

.avatar {
  float: left;
  margin-left: 20px
}
.avatar img {
  display: block; /* removes white space */
}
.avatar>div {
  color: white;
  background-color: black;
  padding: 5px 0;
  text-align: center;
  background-color: #14967c
}
<div class="avatar">
  <a href="https://steamcommunity.com/id/Ullix21" target="_blank">
    <img src="https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/33/33be922a4e16b1bbb7872ab2a149ca1920276571_full.jpg"></a>
  <div>Ullix</div>
</div>
<div class="avatar">
  <a href="http://steamcommunity.com/id/16BitBacon" target="_blank">
    <img src="https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/83/83ec24eb38514fe4ed57360d4b656089dba0e280_full.jpg"></a>
  <div>Wombo</div>
</div>

您可能需要为移动视图添加一些媒体查询...

答案 1 :(得分:0)

I think, this is how I understood your question, correct me if I am wrong:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Web page</title>
    <style>
    .avatar {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
    }
    .avatar img {
    margin: 0px;
    border: 1px solid #ccc;
    float: left;
    width: 178px;
}

    div .desc {
    padding: 8px;
    text-align: center;
    background-color: #14967c;
}
    </style>
  </head>
  <body>
    <div class="avatar">
  <a href="https://steamcommunity.com/id/Ullix21" target="_blank">
    <img style="float: left;" src="https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/33/33be922a4e16b1bbb7872ab2a149ca1920276571_full.jpg"></a>
    <div class="desc"><strong>Ullix</strong></div>
</div>

<div class="avatar">
  <a href="http://steamcommunity.com/id/16BitBacon" target="_blank">
    <img style="float: left;" src="https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/83/83ec24eb38514fe4ed57360d4b656089dba0e280_full.jpg"></a>
    <div class="desc"><strong>Wombo</strong></div>
</div>
<!--
<div class="navn" style="display: inline-block; float:left; vertical-align: top;">Ullix</div>
<div class="navn" style="display: inline-block; flaot:left; vertical-align: top;">Wombo</div>
-->
  </body>
</html>

为了提高响应速度,只需添加媒体查询,请查看以下链接:

this answer

答案 2 :(得分:0)

使用css flexbox

.container{
    display: flex;
    flex-direction: column;
}