0

私のHTMLコードは

<div id="policydoc" >
    <img src="images/arrowdown.png" />   
    <div id="policytext">Policy</div>  
    <img src="images/arrowdown.png" />   
    <div id="policytext">Receipt</div>  
</div>

下向き矢印の画像とポリシーテキストを左側に揃え、2つ目の下向き矢印の画像と領収書のテキストを右側に揃えたいが、同じ行に配置したい。これら2つの画像と2つのテキストをすべて同じ行に配置したい。それをアレンジ？前もって感謝します。

4

4 に答える 4

1

このようにCSSを追加します

#policydoc img {
float: left;
} 

#policydoc #policytext{
float: right;
}
于 2012-08-01T07:01:12.297 に答える
1

これがあなたがフィドルしたいものであることを願っています

html

<div id="policydoc" >
    <div class="left">
        <img src="images/arrowdown.png" />   
        <div class="policytext">Policy</div>
    </div>
    <div class="right">    
        <img src="images/arrowdown.png" />   
        <div  class="policytext">Receipt</div> 
    </div>
</div>​

css

.policytext{
  display: inline-block;
}
.left{
   float:left;
}
.right{
   float:right;
}​
于 2012-08-01T07:05:05.303 に答える
0

@Dipaksが指摘したように、使用する必要がありますがdisplay: inline-block;、現在、無効なhtmlマークアップもあります。

<div id="policydoc" >
    <img src="images/arrowdown.png" />   
    <div class="policytext">Policy</div>  
    <img src="images/arrowdown.png" />   
    <div class="policytext">Receipt</div>  
</div>

これはあなたのhtmlがどのように見えるべきかです。IDを使用する場合は、一意である必要があります。もちろん、cssファイルには、似たようなものではないにしても、次のものが含まれている必要があります。

div.policytext {
    display: inline-block;
}

デモ

于 2012-08-01T07:07:56.333 に答える
-1

間違って使用しdivていて、divを使用して要素をインラインに配置しようとしている場合、divが作成されるパラダイムを完全に理解していません。

Adivは要素のようなものspanです。私spanは画面全体にまたがっていると思います（私は英語を話すので、左から右へ）。とにかく、spanインラインの要素とdivブロックのために特別に作成されました。

実際にはdivインラインで配置できますが、実際には不自然に感じる方法でHTMLを曲げることになります。私見インラインdivは自然のフリークであり、それがに変わるまでそれを打ち負かす必要がありspanます。

于 2018-12-27T15:16:12.387 に答える