Question

我从instagram创建了一个图库，我的脚本加载了用户名，标题，图片网址，个人资料图片。我想在图片上找到这些元素。但是在适应屏幕（移动）方面存在困难。怎么做更具适应性？因为我使用margin-left，我觉得它很糟糕。

我的代码：

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

修改

让它成为＆＃34;自适应＆＃34;你也可以看看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

图像将拉伸（尝试调整窗口大小），您可以调整它以适合您的图像比例...

CSS自适应布局

2 个答案: