css 如何将图像移动到父容器的右侧？

tktrz96b 于 2023-03-20 发布在其他

关注(0)|答案(4)|浏览(210)

我试图将图像移动到浏览器的右端，而不损害我的 Package 容器。

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>

输出-x1c 0d1x
这是我想做的-文本应该容器内的 Package 。但图像我想我的浏览器的右端

css

来源：https://stackoverflow.com/questions/75769954/how-can-i-move-the-image-to-the-right-of-my-parent-container

4条答案

按热度按时间

rdlzhqv91#

你可以用flex来表示img 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）回复(0）举报 2023-03-20

0yycz8jy2#

当前图像包含在.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>

赞(0）回复(0）举报 2023-03-20

rmbxnbpk3#

您可以使用一些数学运算并添加一个负的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>

赞(0）回复(0）举报 2023-03-20

oalqel3c4#

下面是我要做的，在容器中插入图像和文本后，我将在CSS中给予文本（我希望位于容器右侧）提供margin-left: auto;样式，这将告诉所选元素占用右侧的任何可用空间，而保留左侧。
或者，您可以在设置文本元素float: right的样式时为容器指定display: flex类，这将使元素朝该方向浮动，并且图像自动占用剩余空间

赞(0）回复(0）举报 2023-03-20

我来回答

css 如何将图像移动到父容器的右侧？

4条答案

相关问题

热门标签

最新问答