描述:问题是文本似乎从我不想要的td溢出,并且最重要的是,我想将文本放置在Header(H5)的下面,但要避免将文本包装在图像的下面,我认为可以通过为图像提供静态宽度值并使用左属性来完成。但是,当我尝试这样做时,结果并不正确。
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>
关于html - 如何在td中正确定位相对p标签,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47852349/