CSS自适应布局

Question

我从instagram创建了一个画廊，我的脚本加载用户名，标题，图像url，个人资料图像。我想要找到图片上的这些元素。但在适应屏幕(移动)方面存在困难。如何做得更具适应性？因为我使用的是左边缘，所以我认为它很糟糕。

​

​

我的代码：

    <div id="instafeed" class="instafeed">
<div id="instafeed_body">
    <div id="instafeed_main">
    <a id="instafeed_link" target="_blank" href="link"><img id="instafeed_image" src="image_link" /></a>
    </div>
    <div class="instafeed_author_block">
    <div class="instafeed_author_wrapper">
    <div class="instafeed_author"><img src="profile_picture" /></div>
    </div>
    <div class="instafeed_author_desc">
    <div class="instafeed_item_author_name">username</div>
    </div>
    </div>
</div>
</div>

和CSS (我删除了一些样式化代码，如边框等)：

.instafeed {
    text-align: center;
}

#instafeed_image {
    width: 40%;
    padding: 8px;
}

.instafeed_author_block {
    padding: 1%;
}

.instafeed_author_wrapper {
    display: block;
    margin: 0 auto;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.instafeed_author {
    float: left;
    display: block;
    margin-left: 29%;
}

.instafeed_author img {
    width: 72px;
    height: 72px;
    border-radius: 36px;
}

.instafeed_author_desc {
    float: left;
}

.instafeed_item_author_name {
    color: #2c3e50;
    font-size: 21px;
    line-height: 24px;
    margin: 0px 0px 0px 20px;
}

Answer 1

对于定位，使用CSS属性position以及right，left，top和bottom属性，这样你就可以在屏幕上精确定位你想要元素的位置。

示例：

HTML：

<div class="box"></div>

CSS:

.box {
  height:100px;
  width:100px;
  background-color:black;
  position:absolute;
  top:50%;
  left:29%;
}

Fiddle

阅读有关此属性here(w3c)或here(mdn)的更多信息

编辑

为了让它变得“自适应”，你也可以看看CSS的转换属性，这与position属性很好地结合在一起，就像在手持设备上浏览一样，可以更进一步地定位元素。

示例

HTML

<div class="box"></div>

CSS

.box {
  height:100px;
  width:100px;
  background-color:black;
  position:absolute;
  top:50%;
  left:29%;
  transform:translate(-50%, -50%);
}

Fiddle with transform

希望这能有所帮助！

Answer 2

你可以做响应式的，而不是适应性的，这样更好

HTML

<div class="container">
  <div class="box">
    <div class="image">
    </div>
    <div class="text">
    <p></p>
    </div>
  </div>
</div>

CSS

    .container{
      width:100%;
      margin:0;
      padding:0;
    }

    .box{
      width:50%;
      height:50px;
      margin:0 25%;
      float:left;
    }

    .image{
       float:left;
      width:100%;
      height:200px;
        background: linear-gradient(red, yellow);
      background-size: 100% 100%;
    }

    .text{
      text-align:center;
    }

Fiddle

图像将被拉伸(尝试调整窗口大小)，您可以调整它以适应您的图像比例...