左側為文本，右側為溢位影像的div容器-有解無憂

我想重新創建以下結構：左側為文本，右側為溢位影像的 div 容器

黑色是 div 容器，左邊的容器內會有文本，右邊我需要一個比容器大的影像。

我試圖通過網格來做到這一點，但事情變得很時髦。

uj5u.com熱心網友回復：

使用 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>

uj5u.com熱心網友回復：

干得好：

.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>

希望這可以幫助

uj5u.com熱心網友回復：

由于包含 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/478805.html

標籤：html css 反应弹性盒网格

上一篇：CSS表單樣式、文本和按鈕在一起

下一篇：如何在回應式桌面視圖中設定4列