Question

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

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

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

其中一些需要在右边距留白，而有些则需要在左边距留白（默认）。

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

我尝试了一些“技巧”来保证它的利润：将位置更改为相对，设置宽度，右边距：0px，右边：0。

我不太擅长CSS技巧和规则，因此，如果您能找到我的错误并帮助我解决问题，我将很高兴！

Answer 1

尝试：

评论：我已经将您的图片移至<div>中，这些图片具有浮动性，并为其指定了％宽度。您需要自己调整图像宽度...

<div id="bodyer">
    <div style="float: left; with: 48%;"><img id="cataHeaders" src="images/cataheader1.jpg" /></div>
    <div style="float: right; with: 48%;"><img id="cataHeaders" style="width: auto;" src="images/cataheader2.jpg" /></div>
    <div style="clear: both;"></div>
    <div style="float: left; with: 48%;"><img id="cataHeaders" src="images/cataheader3.jpg" /></div>
    <div style="float: right; with: 48%;"><img id="cataHeaders" src="images/cataheader4.jpg" /></div>
    <div style="clear: both;"></div>
    <div style="float: left; with: 48%;"><img id="cataHeaders" src="images/cataheader6.jpg" /></div>
    <div style="float: right; with: 48%;"><img id="cataHeaders" style="width: auto;" src="images/cataheader7.jpg" /></div>
    <div style="clear: both;"></div>
</div>

Answer 2

使用float:right

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

并且不要使用多个id而不是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>

Answer 3

您遇到的第一个问题是id只能只能使用一次（请参阅this article）。如果您有一些CSS要重复多个块，则可以使用class。

如果您这样更改标记：

<div id="bodyer">
  <img class="cataHeaders" src="images/cataheader1.jpg" />
  <img class="cataHeaders" style="position: relative; width: 360px; right: 0px;" src="images/cataheader2.jpg" />
  <img class="cataHeaders" src="images/cataheader3.jpg" />
  <img class="cataHeaders" style="position: relative; width: 540px; right: 0px;" src="images/cataheader4.jpg" />
  <img class="cataHeaders" src="images/cataheader6.jpg" />
  <img class="cataHeaders" style="position: relative; width: 450px; right: 0px;" src="images/cataheader7.jpg" />
</div>

您将像这样处理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;
}

接下来，使用一致的布局说明。 right，left等样式说明用于绝对定位。通过相对定位，您想使用margin或padding样式说明来添加元素之间的相对空间量。

Answer 4

感谢助手！

独奏：

HTML：

        .cataHeaders {
      position: relative;
    }

    #head1 {
      background: url("https://material.angular.io/assets/img/examples/shiba1.jpg") no-repeat;
      width: 720px;
      height: 200px;
    }

    #head2 {
      background: url("https://material.angular.io/assets/img/examples/shiba1.jpg")no-repeat;
      width: 360px;
      height: 200px;
      margin-left: calc(100% - 360px);
    }

    #head3 {
      background: url("https://material.angular.io/assets/img/examples/shiba1.jpg")no-repeat;
      width: 540px;
      height: 200px;
    }

    #head4 {
      background: url("https://material.angular.io/assets/img/examples/shiba1.jpg")no-repeat;
      width: 540px;
      height: 200px;
      margin-left: calc(100% - 540px);
    }

    #head6 {
      background: url("https://material.angular.io/assets/img/examples/shiba1.jpg")no-repeat;
      width: 360px;
      height: 200px;
    }

    #head7 {
      background: url("https://material.angular.io/assets/img/examples/shiba1.jpg")no-repeat;
      width: 450px;
      height: 200px;
      margin-left: calc(100% - 450px);
    }

        <div id="bodyer">
          <div class="cataHeaders" id="head1"></div>
          <div class="cataHeaders" id="head2"></div>
          <div class="cataHeaders" id="head3"></div>
          <div class="cataHeaders" id="head4"></div>
          <div class="cataHeaders" id="head6"></div>
          <div class="cataHeaders" id="head7"></div>
        </div>

无法保证<img/>的页边距

4 个答案: