Div 左侧为文本，右侧为溢出图像的容器

Question

我想重新创建以下结构：

黑色的是 div 容器，容器里面左边是文字，右边是比容器大的图片。

我尝试通过网格来做到这一点，但事情很快就变得很奇怪。

Answer 1

给你：

.background {
  padding: 25px;
  display: flex;
  border: 1px solid black;
  height: 150px;
  position: relative;
  margin-top: 50px;
}

.text {
  border: 1px solid green;
  width: 50%;
  padding: 10px;
}

.img {
  text-align: center;
  width: 50%;
  display: flex;
  justify-content: center;
}

.img>div {
  border: 1px solid blue;
  width: fit-content;
  padding: 10px;
  height: 200px;
  position: absolute;
  bottom: 25px;
}

<div class="background">
  <div class="text">
    <p>
      text1
    </p>
    <p>
      text2
    </p>
    <button>
 Click me
 </button>
  </div>
  <div class="img">
    <div>
      me img
    </div>
  </div>
</div>

希望对您有所帮助

Answer 2

使用 flexbox。

.main-container{
  display:flex;
      display: flex;
    justify-content: space-evenly;
  border:1px solid black;
  margin:30px;
  height:300px;
   padding:10px;
}
.image{
  width:50vw;
  position:relative;
}
img{
  width:100%;
  height:150%;
  width: 100%;
    height: 150%;
    top: -50%;
    position: absolute;
}
.text{
  display:flex;
  align-items:center;
}

<div class="main-container">
  <div class="text">
    <p>Somthing Somthing</p>
  </div>
  
  <div class="image">
    <img src="https://loremflickr.com/640/360" />
  </div>
</div>

Answer 3

包含的 div 保持尺寸（如其边框所示）似乎很重要，因此此代码段将实际图像添加为绝对定位的伪元素的背景。

这样图像的突出部分不会改变容器 div 尺寸。

这是一个使用网格定位左右两侧的简单片段。当然你会想要改变比例以适应你的特殊情况，在左侧添加样式等等：

.container {
  display: grid;
  grid-template-columns: 3fr 2fr;
  width: 50vw;
  height: auto;
  margin-top: 10vh;
  border: solid 2px black;
}

.leftside {
  padding: 1vw;
}

.rightside {
  position: relative;
  width: 100%;
  height: 100%;
}

.rightside::before {
  content: '';
  background-color: pink;
  background-image: url(https://picsum.photos/id/1015/500/200);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  width: 50%;
  height: 140%;
  bottom: 0;
  left: 25%;
  position: absolute;
}

<div class="container">
  <div class="leftside">
    <h2>Heading</h2>
    <div>text1</div>
    <div>text2</div>
  </div>
  <div class="rightside"></div>
</div>

Div 左侧为文本，右侧为溢出图像的容器

Div container with text on the left side and overflow image on the right

html

css

grid

flexbox

reactjs