ボックスの下にテキストを配置する方法

Question

2つのボックスを隣り合わせに配置したので、ボックスのすぐ下にテキストを配置したいと考えています。私がこれまでに持っていたHTML/CSSは、テキストを右手ボックスの右上隅に置いています。助言がありますか？

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

Answer 1

使用display: inline-block;を試してみてください。

同様：

span { 
 
    display: inline-block; 
 
}

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

・ホープ、このことができます：

span { 
    display: inline-block; 
} 

は、以下のスニペットを見てください！

Answer 2

<span>でこの

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

ここでは、実際のボックスがお互いにではなく、お互いの隣にあり、マージンを使って移動しています。

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

Answer 4

これを試してみてください（下記の注意事項や説明を参照）：

.one-off-pricing { 
 
width: 800px; 
 
} 
 

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

 
p { 
 
font-weight:bold; 
 
}

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

1）なぜ、スタイルシート内のすべてのインラインCSSを置きます？

スケーリングとメンテナンスに大いに役立ちます。

2）なぜidの代わりにを「1回限りの価格設定」に使用するのですか？

CSSセレクタが長く複雑になり始めると、長いチェーンセレクタのidsが物事を混乱させる可能性があります。この理由から、idの代わりにclassを使用するほうがよい場合があります（必ずしもそうとは限りません）。

3）<span>の代わりに<p>を使用する理由

問題の要素が段落として最もよく記述されているためです。

4）のディスプレイを使用する理由：インラインブロック floatの代わりに？

この状況では、単にfloatsは必要ないためです。