html - CSS自适应布局

我从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（我删除了一些样式化代码，例如border等）：

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

最佳答案

要进行定位，请结合使用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

希望这可以帮助！

关于html - CSS自适应布局，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34751008/