Question

我正在创建布局，但该位置出现了一些问题。我尝试了position: absolute，但遇到了一些问题。我使用display: flex和flex:1来显示等高的div。

您能帮我这个忙吗？我尝试了下面的代码进行设置。

.set_white_box{
  position: absolute;
  width: 50%;
  top: 50%;
  transform: translateY(-50%);
}

我在代码段中添加了一个简单的结构。

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
}

.equal_padding {
  padding: 100px 0;
}

.service_content1 {
  display: flex;
}

.service_img_col {
  width: 50%;
  flex: 1;
}

.service_img_col img {
  width: 100%;
}

.service_box {
  flex: 1;
  background-color: #fff;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
  padding: 40px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section>
  <div class="container">
    <div class="row">
      <div class="equal_padding clearfix service_content1">
        <div class="service_box set_white_box">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>

        <div class="service_img_col"><img src="https://images.pexels.com/photos/1097768/pexels-photo-1097768.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>

      </div>

      <div class="equal_padding clearfix service_content1">
        <div class="service_img_col"><img src="https://images.pexels.com/photos/1097768/pexels-photo-1097768.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>

        <div class="service_box set_white_box">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

请尝试以下代码。您还可以添加多个框不变设计，并且左右对齐看起来不错

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
}

.equal_padding {
  padding: 100px 0;
}
.equal_padding:nth-child(2n + 1) .service_img_col {
  position: relative;
  left: -50px;
  top: 30px;
}
.equal_padding:nth-child(2n + 2) .service_img_col {
  position: relative;
  right: -50px;
  top: -30px;
}
.equal_padding:nth-child(2n + 1) {
  padding-left: 50px;
}
.equal_padding:nth-child(2n + 2) {
  padding-right: 50px;
}

.service_content1 {
  display: flex;
}

.service_img_col {
  width: 50%;
  flex: 1;
  border: 4px solid #000;
}

.service_img_col img {
  width: 100%;
}

.service_box {
  flex: 1;
  background-color: #fff;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
  padding: 40px;
  position: relative;
  z-index: 9;
  border: 4px solid #000;
}

<section>
  <div class="container">
    <div class="row">
      <div class="equal_padding clearfix service_content1">
        <div class="service_box set_white_box">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>

        <div class="service_img_col"><img src="https://images.pexels.com/photos/1097768/pexels-photo-1097768.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>

      </div>

      <div class="equal_padding clearfix service_content1">
        <div class="service_img_col"><img src="https://images.pexels.com/photos/1097768/pexels-photo-1097768.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>

        <div class="service_box set_white_box">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 2

您可以使用transform来移动图像，使用z-index来更改顺序

const table = { 0: { firstName: 'Mark', lastName: 'Spencer', address: { Country: 'England', Town: 'London', Street: 'Old street', Postcode: 'W2 1RB' } }, 1: { firstName: 'Franz', lastName: 'Muller', address: { Country: 'Germany', Town: 'Berlin', Street: 'Wilhelmstrasse', Postcode: '10115 - 14199' } }, 2: { firstName: 'William', lastName: 'Davies', address: { Country: 'England', Town: 'Liverpool', Street: 'New Street', Postcode: 'l1 0au' } } };

const groupBy = (getId, array) => 
  array.reduce(
    (groups, x) => {
      const k = getId(x);
      if (!groups[k]) groups[k] = [];
      groups[k].push(x);
      return groups;
    },
    {}
  );
  
  
console.log(
  groupBy(
    person => person.address.Country,
    Object.values(table)
  )
)

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
}

.equal_padding {
  padding: 100px 0;
}

.service_content1 {
  display: flex;
  
}

.service_img_col {
  width: 50%;
  flex: 1;
  /* translate to move it around */
  transform: translate(-50px, 50px);
}

.service_img_col img {
  width: 100%;
}

.service_box {
  flex: 1;
  background-color: #fff;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
  padding: 40px;
  /* z-index to bring text to front */
  position:relative;
  z-index: 2;
}

/* jsut using nth-child to target the 2nd version */
.equal_padding:nth-child(even) .service_img_col {
  transform: translate(50px, -50px);
}

使用CSS在图片上进行div

2 个答案: