我在img

Question

我想在图像旁边放置文本，并在其中添加填充。我将文本和图像都放在一个框中，所以可能有问题。我还需要网站对移动设备友好。

这是我的代码：

.content-title {
  font-size: 50px;
}

#section-a ul {
  list-style: none;
  margin: 0px;
  padding: 0;
}

#tiso {
  position: static;
  padding: 0px;
  height: auto;
  float: left;
  max-width: 800px;
  max-height: 800px;
}

#tiso_text {
  padding: 3em;
  text-align: center;
}

<section id="section-a" class="grid">
  <div class="content-wrap">
    <ul class="obr">
      <img src="IMG/tiso.png" alt="Tiso-main" id="tiso">
      <h1 class="content-title">Jozef Tiso</h1>
      <li class="textcontent">
        <p id="tiso_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate obcaecati et porro quidem iure, odio.
        </p>
      </li>
    </ul>
  </div>
</section>

现在，当将浏览器调整为最小尺寸时，它可以工作，但不能完全使用它。我知道为什么，请参见下面的图片，我只是不知道该如何解决。

Image of what I have, and what I need.

Answer 1

所以这是我的解决方案，我希望它是您想要的。

 .content-title {
  font-size: 50px;
 text-align: center;
}


.item {
 max-width: 300px;
 float: left;
 padding: 20px 3rem;

 }

 #tiso {
  position: static;
  padding: 0px;
  height: auto;
  float: left;
  max-width: 800px;
  max-height: 800px;
  display: block;
 }

  #tiso_text {

  text-align: center;
 }

<section id="section-a" class="grid">
  <div class="content-wrap">
    <div class="box">
      <img src="IMG/tiso.png" alt="Tiso-main" id="tiso">

      
      <div class="item">
        <h1 class="content-title">Jozef Tiso</h1>
        <p id="tiso_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
          Voluptate obcaecati et porro quidem iure, odio.
        </p>
     </div>
    </div>
  </div>
</section>