Question

我有一些文字，我必须能够在其中放置图片。我想为我的照片添加三种不同的位置：中央，左侧和右侧。我的照片有标题。

我使用float: right;和float: left;，但我的问题是将标题保留在图像区域内，而不是在我将其置于margin-right: auto;和{{1 }}

我必须保留HTML，我宁愿避免使用Js。

JSFiddle ：https://jsfiddle.net/MarionLeHerisson/zbozmamh/4/

代码段

＆＃13;

margin-left: auto;

＆＃13;

figure {
  position: relative;
  display: block;
}

.center {
  margin-left: auto;
  margin-right: auto;
  background-color: orange;
}

.left {
  float: left;
  background-color: lightblue;
}

.right {
  float: right;
  background-color: pink;
}

a {
  display: block;
  text-align: center;
}

img {
  width: 300px;
  height: 200px;
}

.caption {
  position: absolute;
  right: 0;
  bottom: 0;
}

＆＃13;

标题位于黄色区域的右侧，我将它放在img的右侧。

感谢您的时间：）

Answer 1

有一点重新排序和flexbox解决方案。虽然可能值得研究css grid而不是使用float

＆＃13;

figure {
  display: flex;
  justify-content: center
}

.center {
  margin: 0 auto;
  background-color: tomato
}

.left {
  margin: 0 auto;
  float: left;
  background-color: #add8e6
}

.right {
  margin: 0 auto;
  float: right;
  background-color: pink
}

figure a {
  display: inline-block;
  position: relative
}

img {
  display: block;
  width: 300px;
  height: 200px
}

.caption {
  position: absolute;
  right: 0;
  bottom: 0
}

＆＃13;

<div contenteditable class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et porta ante, eu posuere elit. Nunc suscipit augue nec dolor sagittis, in ultricies mi semper. Sed et mi eget nibh rutrum tristique at in sapien. Nunc dolor mauris, tempor vel sem ac, imperdiet maximus metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sit amet elit vehicula, molestie justo id, ornare massa. Vivamus ullamcorper dapibus orci eget auctor. Nunc feugiat leo sed semper placerat. Maecenas ut mauris in odio fringilla semper at at dolor. Pellentesque dictum ultricies accumsan.</p>
  <figure class="center">
    <a>
      <img class="img" />
      <figcaption class="caption">
        <small><em class="legend">FIG 1 - center</em></small>
      </figcaption>
    </a>
  </figure>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et porta ante, eu posuere elit. Nunc suscipit augue nec dolor sagittis, in ultricies mi semper. Sed et mi eget nibh rutrum tristique at in sapien. Nunc dolor mauris, tempor vel sem ac, imperdiet maximus metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sit amet elit vehicula, molestie justo id, ornare massa. Vivamus ullamcorper dapibus orci eget auctor. Nunc feugiat leo sed semper placerat. Maecenas ut mauris in odio fringilla semper at at dolor. Pe
    <figure class="left">
      <picture>
        <a>
          <img class="img">
          <figcaption class="caption">
            <small><em class="legend">FIG 2 - left</em></small>
          </figcaption>
        </a>
      </picture>
    </figure>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et porta ante, eu posuere elit. Nunc suscipit augue nec dolor sagittis, in ultricies mi semper. Sed et mi eget nibh rutrum tristique at in sapien. Nunc dolor mauris, tempor vel sem ac, imperdiet maximus metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sit amet elit vehicula, molestie justo id, ornare massa. Vivamus ullamcorper dapibus orci eget auctor. Nunc feugiat leo sed semper placerat. Maecenas ut mauris in odio fringilla semper at at dolor. Pellentesque dictum ultricies accumsan.</p>
    <figure class="right">
      <picture>
        <a>
          <img class="img">
          <figcaption class="caption">
            <small><em class="legend">FIG 3 - right</em></small>
          </figcaption>
        </a>
      </picture>
    </figure>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et porta ante, eu posuere elit. Nunc suscipit augue nec dolor sagittis, in ultricies mi semper. Sed et mi eget nibh rutrum tristique at in sapien. Nunc dolor mauris, tempor vel sem ac, imperdiet maximus metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sit amet elit vehicula, molestie justo id, ornare massa. Vivamus ullamcorper dapibus orci eget auctor. Nunc feugiat leo sed semper placerat. Maecenas ut mauris in odio fringilla semper at at dolor. Pellentesque dictum ultricies accumsan.</p>
</div>

＆＃13;

Answer 2

给你的标题提供与图像相同的宽度，以边距为中心：自动，然后将文本对齐到右边：

right: 0;
left: 0;
bottom: 0;
margin-left: auto;
margin-right: auto;
width: 300px;
text-align: right;

请参阅更新的小提琴here

Answer 3

问题是保证金：自动继承父宽度为100％。它仅适用于具有宽度的元素，否则不会。
只需将宽度添加到“中心”类。

试试这个

.center {
  margin-left: auto;
  margin-right: auto;
  width:300px; //Equal to image width
  background-color: orange;
}

这里的例子

figure { 
  position: relative;
  display:block;
}

.center {
  margin-left: auto;
  margin-right: auto;
  width:300px;
  background-color: orange;
}

.left {
  float: left;
  background-color: lightblue;
}

.right {
  float: right;
  background-color: pink;
}

a {
  display: block;
  text-align:center;
}

img {
  width: 300px;
  height: 200px;
}

.caption {
  position: absolute;
  right: 0;
  bottom: 0;
}

<div contenteditable class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et porta ante, eu posuere elit. Nunc suscipit augue nec dolor sagittis, in ultricies mi semper. Sed et mi eget nibh rutrum tristique at in sapien. Nunc dolor mauris, tempor vel sem ac, imperdiet maximus metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sit amet elit vehicula, molestie justo id, ornare massa. Vivamus ullamcorper dapibus orci eget auctor. Nunc feugiat leo sed semper placerat. Maecenas ut mauris in odio fringilla semper at at dolor. Pellentesque dictum ultricies accumsan.</p>
  <figure class="center">
    <picture>
      <a>
        <img class="img">
      </a>
    </picture>
    <figcaption class="caption">
      <small>
        <em class="legend">FIG 1 - center</em>
      </small>
    </figcaption>
  </figure>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et porta ante, eu posuere elit. Nunc suscipit augue nec dolor sagittis, in ultricies mi semper. Sed et mi eget nibh rutrum tristique at in sapien. Nunc dolor mauris, tempor vel sem ac, imperdiet maximus metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sit amet elit vehicula, molestie justo id, ornare massa. Vivamus ullamcorper dapibus orci eget auctor. Nunc feugiat leo sed semper placerat. Maecenas ut mauris in odio fringilla semper at at dolor. Pe
  <figure class="left">
    <picture>
      <a>
        <img class="img">
      </a>
    </picture>
    <figcaption class="caption">
      <small>
        <em class="legend">FIG 2 - left</em>
      </small>
    </figcaption>
  </figure>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et porta ante, eu posuere elit. Nunc suscipit augue nec dolor sagittis, in ultricies mi semper. Sed et mi eget nibh rutrum tristique at in sapien. Nunc dolor mauris, tempor vel sem ac, imperdiet maximus metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sit amet elit vehicula, molestie justo id, ornare massa. Vivamus ullamcorper dapibus orci eget auctor. Nunc feugiat leo sed semper placerat. Maecenas ut mauris in odio fringilla semper at at dolor. Pellentesque dictum ultricies accumsan.</p>
    <figure class="right">
    <picture>
      <a>
        <img class="img">
      </a>
    </picture>
    <figcaption class="caption">
      <small>
        <em class="legend">FIG 3 - right</em>
      </small>
    </figcaption>
  </figure>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et porta ante, eu posuere elit. Nunc suscipit augue nec dolor sagittis, in ultricies mi semper. Sed et mi eget nibh rutrum tristique at in sapien. Nunc dolor mauris, tempor vel sem ac, imperdiet maximus metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sit amet elit vehicula, molestie justo id, ornare massa. Vivamus ullamcorper dapibus orci eget auctor. Nunc feugiat leo sed semper placerat. Maecenas ut mauris in odio fringilla semper at at dolor. Pellentesque dictum ultricies accumsan.</p>
</div>

css：带有标题的img的不同位置

3 个答案: