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

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 的左侧流动，这是我不想要的。

我希望以与单列相同的方式将图像放在 Angular 落，并且文本环绕图像。

谢谢

Answer 1

我使用了一个 wrapper 作为 flexbox 容器，所以两边会彼此相邻，最重要的是，两侧中的每一个本身都是一个 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>