左列带有圆形图像的两列文本

Question

我正在尝试实现两列文本，左上角左列带有圆形图像。 到目前为止，我已经这样做了：

<div class="photoside-left">
<img class="photo" src="http://verticaltaste.digitalemotion.ie/wp-
content/uploads/2017/09/photo.jpg" alt="Laura Cosoi">

<div class="drop-cap">
   <p>There are many variations of passages of Lorem Ipsum available, but 
   the majority have suffered alteration in some form, by injected humour, 
   or randomised words which don't look even slightly believable. If you are 
   going to use a passage of Lorem Ipsum, you need to be sure there isn't 
   anything embarrassing hidden in the middle of text. All the Lorem Ipsum 
   generators on the Internet tend to repeat predefined chunks as necessary, 
   making this the first true generator on the Internet. It uses a 
   dictionary of over 200 Latin words, combined with a handful of model 
   sentence structures, to generate Lorem Ipsum which looks reasonable. The 
   generated Lorem Ipsum is therefore always free from repetition, injected 
   humour, or non-characteristic words etc. There are many variations of 
   passages of Lorem Ipsum available, but the majority have suffered 
   alteration in some form, by injected humour, or randomised words which 
   don't look even slightly believable. If you are going to use a passage of 
   Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden 
   in the middle of text. All the Lorem Ipsum generators on the Internet 
   tend to repeat predefined chunks as necessary, making this the first true 
   generator on the Internet. It uses a dictionary of over 200 Latin words, 
   combined with a handful of model sentence structures, to generate Lorem 
   Ipsum which looks reasonable. The generated Lorem Ipsum is therefore 
   always free from repetition, injected humour, or non-characteristic words 
   etc.</p>
</div>

</div>

还有 CSS：

@media (min-width: 1100px) {
.photoside-left {
-webkit-box-flex: 1.5;
-webkit-flex: 1.5;
-ms-flex: 1.5;
flex: 1.5;
 }
}
@media (min-width: 768px) {
.photoide-left {
padding: 0 40px 0 0;
margin: 0 40px 0 0;
border-right: 1px solid #e7e4d3;
 }
 }
.photoside-left {
-webkit-flex-shrink: 1;
-ms-flex-negative: 1;
 flex-shrink: 1;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
 flex: 1;
 margin: 0 0 40px 0;
 }
@media (min-width: 1100px) {
.photo {
 width: 130px;
 height: 130px;
 }
 }
 .photo {
 border-radius: 50%;
 line-height: 0;
 border: 1px solid #e7e4d3;
 background-color: #fffef7;
 display: inline-block;
 width: 100px;
 height: 100px;
 float: left;
 padding: 6px;
 margin: 0 20px 0 0;
 shape-outside: circle();
  }
.drop-cap p:first-child:first-letter {
 color: #333e48;
 margin: 4px 12px 0 0;
 border: 1px solid #e7e4d3;
 padding: 14px 15px 8px 15px;
 line-height: 32px;
 font-size: 52px;
 font-family: "Gilroylight";
 float: left;
 }
 @media (min-width: 800px) {
 .split-columns {
 -webkit-column-count: 2; /* Chrome, Safari, Opera */
 -moz-column-count: 2; /* Firefox */
 column-count: 2;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
-webkit-column-rule: 1px solid #e7e4d3; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid #e7e4d3; /* Firefox */
column-rule: 1px solid #e7e4d3;
}

问题是，如果我将类“split-columns”添加到下沉式 div，那么 div 左侧的图像流是我不想要的。

我想把图片放在角落里，就像它是一列一样，文字环绕在图片周围。

谢谢

Answer 1

我使用了一个 wrapper 作为 flexbox 容器，所以两边会紧挨着水平和垂直。

html, body{ height:100% }
  
.wrap {
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  border: 1px solid black;
  height:50%;
}

.wrap img {
  position: absolute;
  top: 10px;
  left: 10px;
}

.wrap > div {
  flex: 1;
  border-left:1px solid black;
  position: relative;
  text-align: center;
  
  /* center within each side */
  display:flex;
  flex-direction: column;
  justify-content: center;
}

.wrap > div:first-child{ border:0; }

<div class='wrap'>
  <div>
    <img src='https://www.gravatar.com/avatar/5ae94a07635b11cb890559cb5febbd79?s=32'>
    text 1
  </div>
  <div>text 2</div>
</div>