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

一种解决方案可能是尝试使用弹性盒：

.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>

Answer 2

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: auto; 
  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=".\images\placeholder.jpg">
</td></tr></table>
</div>
</div>

我刚刚将高度更改为自动，因为当您说宽度时，我以为您是指高度，但是它应该与宽度相同。我帮不上你的照片。请从网络中添加一张示例图片到您的代码中，以便为您提供帮助

将图像放在HTML / CSS框旁边

2 个答案: