时间戳

首页 > 解决方案 > 我在 img 旁边填充文本有问题

css - 我在 img 旁边填充文本有问题

问题描述

我想在图像旁边放置文本并为其添加填充。我在一个盒子里有文字和图像，所以这可能是个问题。我还需要网站对移动设备友好。

这是我的代码：

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

现在，当浏览器调整到最小时它可以工作，但它不能完全工作。我知道为什么，见下图，我只是不知道如何解决这个问题。

我有什么，我需要什么的形象。

标签： csshtml

解决方案

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

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

推荐阅读