时间戳

首页 > 解决方案 > 无法正确边距

html - 无法正确边距

问题描述

我将首先说我正在寻找解决方案但找不到。

我有应该用作标题的图像。

#bodyer {
  position: relative;
  display: inline-block;
  margin: 0 10%;
  margin-top: 80px;
  width: 80%;
  background: rgba(245, 210, 83, 0.55);
  border-bottom: 2px solid rgba(77, 77, 77, 0.7);
}

#cataHeaders {
  display: block;
  position: relative;
}
<div id="bodyer">
  <img id="cataHeaders" src="http://via.placeholder.com/400x400" />
  <img id="cataHeaders" style="position: relative; width: 360px; right: 0px;" src="http://via.placeholder.com/360x360" />
  <img id="cataHeaders" src="http://via.placeholder.com/40x40" />
  <img id="cataHeaders" style="position: relative; width: 540px; right: 0px;" src="http://via.placeholder.com/540x540" />
  <img id="cataHeaders" src="http://via.placeholder.com/40x40" />
  <img id="cataHeaders" style="position: relative; width: 450px; right: 0px;" src="http://via.placeholder.com/450x450" />
</div>

其中一些需要向右边缘，其中一些需要向左边缘（默认）。

图片是预先准备好的，并且设计了固定的宽度和高度（宽度和高度示例中的细节是那些图像的真实细节）。

我尝试了一些“技巧”来保留它：将位置更改为相对，设置宽度，margin-right：0px，right：0。

我不是 CSS 技巧和规则方面的专家，所以如果你能找到我的错误并帮助我解决它，我会很高兴的！

标签： htmlcss

解决方案

利用float:right

在这里学习：https ://www.w3schools.com/cssref/pr_class_float.asp

并且不要使用多个ids 使用class代替id，而在 css 中使用.代替#

#bodyer {
  position:relative;
  display: inline-block;
  margin: 0 10%;
  margin-top: 80px;
  width: 80%;
  background: rgba(245, 210, 83, 0.55);
  border-bottom: 2px solid rgba(77, 77, 77,0.7);
}

.cataHeaders {
  display: block;
  position: relative;
}
    <div id="bodyer">
      <img class="cataHeaders" src="https://material.angular.io/assets/img/examples/shiba1.jpg" />
      <img class="cataHeaders" style="position: relative; width: 360px; float:right" src="https://material.angular.io/assets/img/examples/shiba1.jpg" />
      <img class="cataHeaders" src="https://material.angular.io/assets/img/examples/shiba1.jpg" />
      <img class="cataHeaders" style="position: relative; width: 540px; float:right;" src="https://material.angular.io/assets/img/examples/shiba1.jpg" />
      <img class="cataHeaders" src="https://material.angular.io/assets/img/examples/shiba1.jpg" />
      <img class="cataHeaders" style="position: relative; width: 450px; float:right;" src="https://material.angular.io/assets/img/examples/shiba1.jpg" />
    </div>

推荐阅读