弹出层左边文字，右边图片

可以使用CSS中的flex布局来实现弹出层中文字和图片的左右布局。以下是示例代码：

HTML代码：

<button id="myBtn">点击打开弹出层</button>

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <div class="modal-body">
      <div class="modal-text">
        <h2>标题</h2>
        <p>这里是弹出层中的文字内容。</p>
      </div>
      <div class="modal-image">
        <img src="图片地址" alt="图片描述">
      </div>
    </div>
  </div>
</div>

CSS代码：

/* 弹出层背景 */
.modal {
  display: none; 
  position: fixed; 
  z-index: 1; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgba(0,0,0,0.4); 
}

/* 弹出层内容 */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; 
  padding: 20px;
  border: 1px solid #888;
  width: 80%; 
  box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75); /* 添加阴影效果 */
}

/* 关闭按钮 */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* 弹出层主体 */
.modal-body {
  display: flex; /* 使用flex布局 */
}

/* 左边文本 */
.modal-text {
  flex-basis: 70%; /* 左边占70%的宽度 */
}

/* 右边图片 */
.modal-image {
  flex-basis: 30%; /* 右边占30%的宽度 */
  text-align: center; /* 图片居中 */
}

/* 图片样式 */
.modal-image img {
  max-width: 100%; /* 图片宽度最大为容器的100% */
  height: auto; /* 高度自适应 */
}

这样就可以实现弹出层中文字和图片的左右布局了。可以根据需要调整左右两部分的宽度比例和样式。