我试图在不影响包装器容器的情况下将图像移到浏览器的右端.

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>

output - enter image description here

这就是我想要做的-文本应该是包装器内的容器.但是我想要在我的浏览器的右端

enter image description here

推荐答案

您可以将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>

Html相关问答推荐

值更新时旋转数字动画

Rmarkdown上的垂直标签集

我能阻止浏览器跨跨区边界折叠空格吗?

如何使用css实现悬停时的动画zoom ?

每次在视口中运行动画

带有MathJax SVG的HTML代码在XHTML中不起作用

如何在伪元素背景中定位多个CSS径向梯度

背景可点击,而不是文本

列表项文本在占据剩余空间之前在标记下换行

页面文件夹内的 HTML 页面未加载主目录的 style.css

如何居中此按钮,即使它已经在计算机分辨率中居中

如何影响 HTML 元素的哪些子元素导致其增长,哪些不增长?

在Angular中,类型"HTMLDivElement"不能分配给类型"Node"

如何在 flex 项目中忽略子元素的宽度

在带有换行文本的工具提示中显示溢出文本

HTML 如何根据屏幕尺寸调整/裁剪视频背景?

在包含 html 标签的字符串的子字符串中应用不同的样式

Cargo 在网格中的排列

样式不适用于来自 tailwindcss 的网络

表格布局:固定;文本溢出单元格时不起作用