如何在td中正确定位相对p标签

Posted 2021-04-10

说明：问题是文本似乎从我不想要的td溢出，除此之外，我想将文本放在Header（H5）下面但是避免将文本包装在图像下面，我假设可以通过给图像提供静态宽度值并使用left属性来完成。但是，当我试图这样做时，它并不是正确的。

table.service_section{
    width: 80%;
    margin-left: 10%;
    border-spacing: 10px;}

  table.service_section td{
    border: 2px solid #ccc;
    box-sizing: border-box;
    border-radius:5px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);}

  table.service_section td img{
    display: inline-block;
    width: 50px;
    height: 25px;}
  table.service_section td h5{
    display: inline-block;
    margin: 0;
    padding: 0;
    position: absolute;}
  table.service_section td p{
    display: inline-block;
    position: relative;
    margin: 0;
    top: 0px;
    left: 50px;
    font-size: 10;}

<table class = "service_section">
  <tr>
    <td>
      <img src="https://image.flaticon.com/icons/svg/23/23665.svg" /> <h5>Home Button</h5>
      <p>This is going to be information regarding the service/product which is provided by Odeyale Corporation.</p>
    </td>
    <td>
      <img src="https://image.flaticon.com/icons/svg/23/23665.svg" /> <h5>Home Button</h5>
      <p>This is going to be information regarding the service/product which is provided by Odeyale Corporation.</p>
    </td>
    <td>
      <img src="https://image.flaticon.com/icons/svg/23/23665.svg" /> <h5>Home Button</h5>
      <p>This is going to be information regarding the service/product which is provided by Odeyale Corporation.</p>
    </td>
  </tr>

  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

答案

试试这个：

table.service_section {
  width: 80%;
  margin-left: 10%;
  border-spacing: 10px;
}

table.service_section td {
  border: 2px solid #ccc;
  box-sizing: border-box;
  border-radius:5px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

table.service_section td img {
  float: left;
  width: 20%;
  height: 25px;
}

table.service_section td h5 {
  margin: 0 0 5px 0;
  padding: 0;
  position: relative;
  width: 100%;
  word-wrap:break-word;
}

table.service_section td p {
  position: relative;
  font-size: 10;
  margin-top: 0;
  word-wrap:break-word;
}

.wr {
  width: 75%;
  float: left;
  margin-left: 4%;
}

<table class = "service_section">
  <tr>
    <td>
      <img src="https://image.flaticon.com/icons/svg/23/23665.svg" />
      <div class="wr">
        <h5>Home Button</h5>
      <p>This is going to be information regarding the service / product which is provided by Odeyale Corporation.</p>
      </div>
    </td>
    <td>
      <img src="https://image.flaticon.com/icons/svg/23/23665.svg" />
      <div class="wr">
         <h5>Home Button</h5>
      <p>This is going to be information regarding the service / product which is provided by Odeyale Corporation.</p>
      </div>
    </td>
    <td>
      <img src="https://image.flaticon.com/icons/svg/23/23665.svg" /> 
      <div class="wr">
      <h5>Home Button</h5>
      <p>This is going to be information regarding the service / product which is provided by Odeyale Corporation.</p>
      </div>
    </td>
  </tr>

  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

另一答案

Isaac - 看起来你的“table.service_section td p”你从左边推50px这个css“left：50px;”。那就是将你的p标签推到td的100％宽度之外。快速修复将添加50px的边距权限以抵消推送的p标签。这将使它保持在您正在寻找的窗口中。也就是说，有更优雅的方法可以使用Bootstrap甚至Flex Box实现相同的功能。查看有关Flex Box https://css-tricks.com/snippets/css/a-guide-to-flexbox/的文章。这可能会为您提供一些新策略来实现您的目标。再次，使用Bootstrap Cards可以帮助您实现同样的目标。最后一项，您的图像比需要的大得多。我会将图像调整到您想要的大小，这将帮助您消除不必要的代码，并帮助您更快地实现所需的结果。希望有所帮助。

table.service_section{
    width: 80%;
    margin-left: 10%;
    border-spacing: 10px;}

  table.service_section td{
    border: 2px solid #ccc;
    box-sizing: border-box;
    border-radius:5px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);}

  table.service_section td img{
    display: inline-block;
    width: 50px;
    height: 25px;}
  table.service_section td h5{
    display: inline-block;
    margin: 0;
    padding: 0;
    position: absolute;}
  table.service_section td p{
    display: inline-block;
    position: relative;
    margin: 0;
    top: 0px;
    left: 50px;
    margin-right: 55px;
    font-size: 10;}

<table class = "service_section">
  <tr>
    <td>
      <img src="https://image.flaticon.com/icons/svg/23/23665.svg" /> <h5>Home Button</h5>
      <p>This is going to be information regarding the service/product which is provided by Odeyale Corporation.</p>
    </td>
    <td>
      <img src="https://image.flaticon.com/icons/svg/23/23665.svg" /> <h5>Home Button</h5>
      <p>This is going to be information regarding the service/product which is provided by Odeyale Corporation.</p>
    </td>
    <td>
      <img src="https://image.flaticon.com/icons/svg/23/23665.svg" /> <h5>Home Button</h5>
      <p>This is going to be information regarding the service/product which is provided by Odeyale Corporation.</p>
    </td>
  </tr>

  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

以上是关于如何在td中正确定位相对p标签的主要内容，如果未能解决你的问题，请参考以下文章

如何在 PDF 中正确定位图像旁边的文本？

在 FTGL 中正确定位字体的 y 轴

如何在 Swift 中正确实现不同视图控制器之间的协议和委托？

如何在php中正确实现结构化菜单

ios - 如何在 ios swift 中正确实现后台获取

如何在 C++ 中正确定义包含科学记数法的整数向量？