如何让两个div下彼此？

注：这是一个表，表中得到“没有响应”的手机，因为它不能修复，则需要在手机上横向滚动。很难解释。

这是代码：（不含表）

真正的问题：你如何得到它像一个有桌子，只是不..表？

.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>

来源

2017-03-08 Simon

是不是您的代码与发布的图片相同？ – DaniP

如果你将头像和navn包装在一个容器中，这会不会很好？ –

我没有看到Snippet中的任何表格。 – DomeTune

这个怎么样。

将.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>

你可能需要添加一些媒体查询移动的看法...

来源

2017-03-08 15:57:14 LinkinTED

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>

为了使反应更灵敏，只需添加媒体查询，请点击以下链接：

https://www.w3schools.com/css/css3_mediaqueries_ex.asp

来源

2017-03-08 16:10:09

使用css flexbox

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

来源

2017-03-08 16:16:14

如何让两个div下彼此？

回答

相关问题