html - 将图像放在框旁边 HTML/CSS

Question

我已经研究这个问题大约三个星期了，我到处寻找我想要描绘的东西，但没有得到结果。我知道这很简单，但我就是运气不好!

我有一个横跨屏幕的大盒子，然后我在里面有一个白色盒子，里面有一些文本(我想知道是否可以在添加文本而不是固定宽度时扩展它？)向左对齐，然后我有一个图像，我想向右浮动并让文本框在原始外框的中心重叠它。

我的问题是图像位于外框内，但我无法使其与文本框对齐并在下方重叠。相反，它只是浮​​动在右侧或中间的文本框下方。

table { 
    height: 100%; 
    width: 100%; 
    background-color: #fff;
    font-family: 'Courier New', Courier, monospace;
}

td { 
  height: 100%; 
  width: 100%; 
  vertical-align: middle; 
  text-align: right;
  background-color: #f4d442;
  font-family: 'Courier New', Courier, monospace;
}

.boxed{
  width: 50vw;
  height: 70vh; 
  box-align: left;
  text-align: justify;
  padding: 5%;
  background-color:  #fff;
  margin: 5%;
  margin-left: 5%; 
}

  .container-wrapper{
    text-align:center;
  }

<table><tr><td>

 <div class="container-wrapper">
  <div class="boxed">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed feugiat lectus. Phasellus maximus, ex nec bibendum volutpat, justo erat pellentesque massa, vel malesuada sem lectus tincidunt orci. Aenean eleifend est sit amet dapibus ullamcorper. Nam ornare finibus ex vitae interdum. Sed quis purus eros. Sed ut porttitor dolor, eget ultrices justo. Sed eu leo porta, mattis libero eu, sagittis metus. Vivamus nec lobortis nisi. Suspendisse posuere enim arcu, at interdum dui congue vitae. Aliquam vestibulum accumsan magna. Vivamus a arcu nunc. Cras euismod lacinia augue sed elementum. Phasellus dignissim semper mi at sollicitudin. Vivamus maximus semper nulla. Donec luctus, dolor non viverra aliquam, enim arcu imperdiet sem, et pretium dui ante ac lectus.
</div>
<div class="image">
<img src="https://via.placeholder.com/300x200">
</td></tr></table>
</div>
</div>

我已经尝试了数周来解决这个问题，但没有运气，感谢您能发出的任何光芒!这是我第一个完整制作的网站，欢迎建设性的批评。

Answer 1

一个解决方案可能是尝试使用 flex box:

.container-wrapper {
  background-color: #f4d442;
  font-family: 'Courier New', Courier, monospace;
  display: flex;
  align-items: center;
}

.image {
  margin: 20px;
}

.boxed {
  text-align: justify;
  padding: 20px;
  margin: 20px;
  background-color: #fff;
}

<div class="container-wrapper">
  <div class="boxed">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed feugiat lectus. Phasellus maximus, ex nec bibendum volutpat, justo erat pellentesque massa, vel malesuada sem lectus tincidunt orci. Aenean eleifend est sit amet dapibus ullamcorper.
    Nam ornare finibus ex vitae interdum. Sed quis purus eros. Sed ut porttitor dolor, eget ultrices justo. Sed eu leo porta, mattis libero eu, sagittis metus. Vivamus nec lobortis nisi. Suspendisse posuere enim arcu, at interdum dui congue vitae. Aliquam
    vestibulum accumsan magna. Vivamus a arcu nunc. Cras euismod lacinia augue sed elementum. Phasellus dignissim semper mi at sollicitudin. Vivamus maximus semper nulla. Donec luctus, dolor non viverra aliquam, enim arcu imperdiet sem, et pretium dui
    ante ac lectus.
  </div>
  <div class="image">
    <img src=".\images\placeholder.jpg">
  </div>
</div>