html - 左侧的文本在容器内，图像在容器外

当我设计像这样的图像时，如何用html和CSS设计这部分：


文本在容器内，但右侧的图像不在容器内

最佳答案

您可以查看我尝试过的此代码段。希望对您有所帮助：

body,
html {
  margin: 0px;
  padding: 0px;
}

.full-width-bg {
  float: left;
  position: relative;
  background: blue;
  width: 100%;
}

.container {
  max-width: 1170px;
  margin: 0px auto;
  width: 100%;
}

.left,
.right {
  width: 50%;
  float: left;
}

.left {
  padding: 20px 0;
  color: #fff;
}

.right {
  position: absolute;
  right: 0px;
  width: 50%;
  top: 0px;
  bottom: 0px;
}

.right img {
  height: 100%;
  width:100%;
}

<div class="full-width-bg">

  <div class="container">
    <div class="left">
      <h1>Lorem Ipsum</h1>
      <p>Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello
        123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123
      </p>
    </div>
    <div class="right"><img src="https://dummyimage.com/800x200/fafafa/000" /></div>

  </div>

</div>

关于html - 左侧的文本在容器内，图像在容器外，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43065481/