Question

我是HTML和CSS的新手，我想知道如何将图像直接放在文本框的左侧。为此，图像必须与文本框具有相同的高度，并且整个图片必须居中。这是我已编写的代码：

＆＃13;

div {
    margin: auto;
    width: 20%;
    border: 1px solid black;
    padding: 25px 50px 500px;
    background-color: lightblue;
}

＆＃13;

<img src="https://climate.nasa.gov/system/feature_items/images/28_global_ice_viewer.jpg">
<div> Textbox </div>

＆＃13;

如何使图像的尺寸与其旁边的框相同，以及如何将此图像对齐/放置在此矩形的左边框旁边。整体区块必须位于中心位置。

Answer 1

我会使用CSS的flex属性并将图像调整为背景图像，使其与div对齐。下面是代码：

＆＃13;

.container {
  display: flex;
}

.content {
  flex: 1;
  padding: 50px;
  background-color: lightblue;
}

.image {
  flex: 1;
  background-image: url("https://climate.nasa.gov/system/feature_items/images/28_global_ice_viewer.jpg");
  background-position: center;
  background-size: cover;
}

＆＃13;

<div class="container">
  <div class="image">
  </div>
  <div class="content">
    <p>How do I make an image the same size as the box next to it and how do i align/put this image next to the left-border of this rectangle. The overall block has to be in the center.</p>
  </div>
</div>

＆＃13;

CSS将图片对齐文本框左侧

1 个答案: