两列文本与左栏上的圆形图像

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;
}

问题是我是否添加了课程＆＃34; split-columns＆＃34;对于drop-div div，div左侧的图像流是我不想要的。

我希望将图像放在角落，就像它是一个单独的列和文本一样环绕图像。

谢谢

Answer 1

我使用了一个包装器作为一个flexbox容器，因此两侧将彼此相邻，并且在其上面，两侧各自本身就是一个flexbox容器，因此其中的文本将同时居中水平和水平垂直。

＆＃13;

＆＃13;

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; }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;