0

大きな div 内にラップされた 2 つの div があります。通常のようにブロックとして表示するのではなく、それらを隣り合わせに積み重ねる必要があります。同様のスタックオーバーフローの質問に関する提案に従い、最初の内部 div を左にフロートし、2 番目の内部 div を右にフロートしました。失敗。

両方の内部 div を左にフロートし、overflow:hidden をラッパー div に設定しました。失敗。また、両方の内側の div 表示をインライン ブロック タイプに設定します。失敗。それらはすべて互いに重なり合っていますが、これは私が望んでいるものではありません。

セマンティック マークアップと CSS を次に示します。

<div align="left" style="border:2px dotted #fff;margin-top:5px;">
           <!--  <span class="hyperlink_message">This is the message, redundant</span>      -->
                <div class="hyperlink preview" style=";padding-top:8px;border:1px solid #bbc5ee;">  
                    <div style="float:left;">
                        <a href="https://www.facebook.com/parijat" target="_blank">
                            <img src="https://sphotos-b.xx.fbcdn.net/hphotos-ash4/395790_10150612393596211_887151733_n.jpg" alt="image not found" style="width:100px;height:100px;border:solid 1px gray;margin-right:5px;" ></img>
                        </a>
                    </div>
                    <div style="float:left;">
                        <div style="font-size:12px;color:black;"><a href="{$hyperlinktext[i].url}"><b>My Facebook page</b></a></div>
                        <div style="font-size:10px;color:gray;">www.facebook.com</div>
                        <div style="padding-top:5px;font-size:10px;color:gray;">Facebook is a social utility that connects people with friends and others who work, study and live around them. People use Facebook to keep up with friends, upload an unlimited number of photos, post links and videos, and learn more about the people they meet.</div>
                    </div>
                    <div style="clear: both"></div> 
                </div>
</div>

(マークアップと一緒に CSS スタイルが含まれていることをお許しください。現時点では、ひどいレガシー コードに手を出しています。

そして、対応する JSFiddle です。

http://jsfiddle.net/hpTym/

ここで何が間違っていると思いますか？

4

1 に答える 1

0

フローティング div の幅を設定しますか、それとも特定の幅なしでフローティングする必要がありますか?

于 2013-01-31T11:03:49.777 に答える