时间戳

首页 > 解决方案 > 将图像放在盒子 HTML/CSS 旁边

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

问题描述

我已经玩了大约三个星期了，我一直在寻找我想要描绘的东西，但没有得到结果。我知道这很简单，但我只是没有运气！

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

我的问题是图像在外框中，但我无法让它与文本框对齐并在下面重叠。相反，它只是漂浮在右侧或中心的文本框下方。

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>

我已经尝试了好几个星期来解决这个问题，但没有运气，感谢你能发光的任何光！这是我完全制作的第一个网站，因此欢迎提出建设性的批评。

标签： htmlcss

解决方案

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

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

推荐阅读