html - 我的两个 div 不会堆叠在一起

Question

我有两个 div，包裹在一个更大的 div 中。我需要将它们并排堆叠，而不是让它们像通常那样显示为 block 。我遵循了关于类似 stackoverflow 问题的建议，并将第一个内部 div 向左浮动，将第二个内部 div 向右浮动。没有成功。

我将两个内部 div 都向左浮动，并将 overflow:hidden 设置为包装 div。没有成功。我还将两个内部 div 显示设置为内联 block 类型。没有成功。它们都相互堆叠，这不是我想要的。

这是语义标记和 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/

你们认为这里出了什么问题？

Answer 1

为 float div 设置宽度，还是需要它们在没有特定宽度的情况下 float ？