logo标签列表

我该如何将图像移动到其父容器的右侧？

htmlcssflexbox
3

我正在尝试将图像移动到浏览器的右侧，而不影响我的包装容器。

img {
  max-width: 100%;
}

.story-container {
  border: 1px solid black;
}

.wrapper {
  max-width: 1080px;
  margin: 0 auto;
  width: 90%;
  justify-content: center;
  border: 1px solid black
}

.story-container .wrapper {
  display: flex;
  border: 1px solid red;
}
<section class="story-container">
  <div class="wrapper">
    <div class="story-info">
      <div class="text-container">
        <h2>Bobby and Bella</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ea enim delectus perspiciatis blanditiis vitae, excepturi praesentium vero nulla veniam nihil recusandae placeat architecto accusantium debitis ad, minima, ratione deleniti.
        </p>
        <button>Read More</button>
      </div>
    </div>
    <div class="story-img">
      <img src="https://shots.codepen.io/jennyq/pen/poKvMPP-1280.jpg?version=1667009763" alt="pic of bobby and bella bear" />
    </div>
  </div>
</section>

输出 - 在此输入图像描述

这是我想要做的 - 文本应该被包含在容器内。但是图片我想放在浏览器的右侧。

enter image description here

欢迎！你在答案中提到你使用.wrapper容器用于其他部分。那么，为什么不给父容器添加另一个类来为这个部分设置你想要的.wrapper样式呢？.story-container只用于这个特定的样式问题吗？ - disinfor
4个回答
2
你可以使用flex来处理图片的div。
    <style>
        img {
            max-width: 100%;
        }

        .story-container {
            border: 1px solid black;
        }

        .wrapper {
            max-width: 1080px;
            margin: 0 auto;
            width: 90%;
            justify-content: center;
            border: 1px solid black
        }

        .story-container .wrapper {
            display: flex;
            border: 1px solid red;
        }

        .story-img {
            display: flex;
            flex-direction: column-reverse;
            justify-content: flex-start;
        }
    </style>

</head>
<body>
      <section class="story-container">
        <div class="wrapper">
          <div class="story-info">
            <div class="text-container">
              <h2>Bobby and Bella</h2>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ea enim delectus perspiciatis blanditiis vitae, excepturi praesentium vero nulla veniam nihil recusandae placeat architecto accusantium debitis ad, minima, ratione deleniti.
              </p>
              <button>Read More</button>
            </div>
          </div>
          <div class="story-img">
            <img src="https://shots.codepen.io/jennyq/pen/poKvMPP-1280.jpg?version=1667009763" alt="pic of bobby and bella bear" />
          </div>
        </div>
      </section>
    
</body>
</html>
0

目前图像包含在 .wrapper 中，您已将其设置为全宽的 90％ 并居中 - 因此它永远不会到达右端。

根据您的代码，可能最简单的修复方法是删除最大宽度 90％，以允许 .wrapper 充满整个宽度，然后添加左填充 5％。这应该会产生大致相同的外观，但现在图像完全位于右侧。

img{
  max-width:100%;
}
.story-container{
  border:1px solid black;
}
.wrapper{
  max-width:1080px;
  margin:0 auto;
  padding-left: 5%;
  justify-content:center;
  border:1px solid black
}
.story-container .wrapper{
  display:flex;
  border:1px solid red;
  
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
    <link rel="stylesheet" href="./styles.css" />
 
 </head>
 <body>
 
<section class="story-container">
        <div class="wrapper">
        <div class="story-info">
          <div class="text-container">
            <h2>Bobby and Bella</h2>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime
              ea enim delectus perspiciatis blanditiis vitae, excepturi
              praesentium vero nulla veniam nihil recusandae placeat architecto
              accusantium debitis ad, minima, ratione deleniti.
            </p>
            <button>Read More</button>
          </div>
        </div>
        <div class="story-img">
          <img
            src="https://shots.codepen.io/jennyq/pen/poKvMPP-1280.jpg?version=1667009763"
            alt="pic of bobby and bella bear"
          />
        </div>
        </div>
      </section>
      
      
 </body>

我无法更改包装容器的宽度，因为我也在其他部分使用了相同的包装器。而且我不想在较大的屏幕上拉伸故事容器内的内容。请告诉我如何实现这一点？ - Gagan Deep
这有点破坏DOM的结构，但是可以实现。你能把图片移出包装器吗？还是不行？ - DriveItLikeYouStoleIt
能否请你更详细地解释一下你的需求，@GaganDeep？ - DriveItLikeYouStoleIt
0
你可以使用一些数学知识，添加负的margin-right来扩展元素。 

img {
  max-width: 100%;
}

.story-container {
  border: 1px solid black;
  overflow: hidden;
}

.wrapper {
  max-width: 1080px;
  margin: 0 auto;
  width: 90%;
  justify-content: center;
  border: 1px solid black
}

.story-container .wrapper {
  display: flex;
  border: 1px solid red;
}

.story-img {
  /* either half (100% - 90%) OR have max-width minus screen width */
  margin-right: min(-5%,(1080px - 100vw)/2);
}

body {
  margin: 0;
}
<section class="story-container">
  <div class="wrapper">
    <div class="story-info">
      <div class="text-container">
        <h2>Bobby and Bella</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ea enim delectus perspiciatis blanditiis vitae, excepturi praesentium vero nulla veniam nihil recusandae placeat architecto accusantium debitis ad, minima, ratione deleniti.
        </p>
        <button>Read More</button>
      </div>
    </div>
    <div class="story-img">
      <img src="https://shots.codepen.io/jennyq/pen/poKvMPP-1280.jpg?version=1667009763" alt="pic of bobby and bella bear" />
    </div>
  </div>
</section>

我认为右侧应该同时使用 margin-right 和 margin-top。 - samira zareie
-1

这是我的做法，在容器中插入图像和文本后，我会在我的CSS中给文本（我希望在容器右侧的文本）一个margin-left: auto;样式，这告诉所选元素占据右侧的任何可用空间，同时保留左侧。

或者，您可以给容器一个display: flex类，同时将文本元素的样式设置为float: right，这将使元素向该方向浮动，并自动占据剩余的空间。

不要建议使用“float”。https://dev59.com/0Wkw5IYBdhLWcg3wmruH 另外，为了使你的回答更好，你应该实际上展示你的解决方案。可以直接从问题中复制代码并更新以演示解决方案。 - disinfor
我们可以使用什么代替浮点数？ - samira zareie
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接