Question

我已经将两个盒子放在一起，现在我想在盒子下方放置一些文字。到目前为止，我所拥有的HTML / CSS一直将文本放在右侧框的右上角。有什么建议吗？

＆＃13;

<div id="one-off-pricing" style="width:800px;">
    
    <div id="one-off-pricing-1" style="width:370px;height:400px;border:   1px solid #cecece;float:left;margin-left:270px;margin-top:20px;">
    
    <div id="one-off-pricing-2" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:370px;margin-top:-1px;">
    </div>
   </div>
   
   <span style="font-weight:bold;"> *If for any reason we're unable to complete the job we'll give you a full refund, no questions asked.</span> 
    </div>

＆＃13;

Answer 1

在display: inline-block;上使用<span>。

像：

span  {
  display: inline-block;
}

请看下面的代码段：

＆＃13;

span {
  display: inline-block;
}

＆＃13;

<div id="one-off-pricing" style="width:800px;">
    
    <div id="one-off-pricing-1" style="width:370px;height:400px;border:   1px solid #cecece;float:left;margin-left:270px;margin-top:20px;">
    
    <div id="one-off-pricing-2" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:370px;margin-top:-1px;">
    </div>
   </div>
   
   <span style="font-weight:bold;"> *If for any reason we're unable to complete the job we'll give you a full refund, no questions asked.</span> 
    </div>

＆＃13;

希望这有帮助！

Answer 2

这是一个更好的版本，实际的盒子彼此相邻，而不是在彼此内部，并通过边距移动。

＆＃13;

<div id="one-off-pricing" style="width:800px; overflow: hidden;">
    <div id="one-off-pricing-1" style="width:370px;height:400px;border: 1px solid #cecece;float: left;margin-top:20px;">
    </div>
    <div id="one-off-pricing-2" style="width:370px;height:400px;border: 1px solid #cecece;display: inline-block;margin-top: 20px;">
    </div>
</div>
   
   <p style="font-weight:bold;"> *If for any reason we're unable to complete the job we'll give you a full refund, no questions asked.</p>

＆＃13;

Answer 3

试试这个

<div id="one-off-pricing" style="width:800px;">
    
    <div id="one-off-pricing-1" style="width:370px;height:400px;border:   1px solid #cecece;float:left;margin-left:270px;margin-top:20px;">
    
    <div id="one-off-pricing-2" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:370px;margin-top:-1px;">
    </div>
   </div>
   
   <span style="font-weight:bold;clear:both;display:block;"> *If for any reason we're unable to complete the job we'll give you a full refund, no questions asked.</span> 
    </div>

Answer 4

试试这个（并参见下面的注释和解释）：

＆＃13;

.one-off-pricing {
width: 800px;
}

.one-off-pricing div {
display:inline-block;
width:370px;
height:400px;
border:1px solid #cecece;
}

p {
font-weight:bold;
}

＆＃13;

<div class="one-off-pricing">
<div></div>
<div></div>
<p>*If for any reason we're unable to complete the job we'll give you a full refund, no questions asked.</p>
</div>

＆＃13;

1）为什么要将所有内联CSS放在样式表中？

它大大有助于扩展和维护。

2）为什么使用class进行一次性定价＆＃34;而不是id？

当CSS选择器开始变得冗长而复杂时，长链接选择器中的ids会使事情变得混乱。出于这个原因，使用class代替id通常（并非总是但经常）更好。

3）为什么使用<p>代替<span>？

因为有问题的元素最好被描述为段落。

4）为什么要使用 display：inline-block 而不是浮动？

因为在这种情况下你根本不需要floats。

如何在文本框下方放置文本

4 个答案: