我的两个div不会彼此叠加

时间:2013-01-30 21:00:39

标签: html css-float css

我有两个div,包裹在一个更大的div中。我需要将它们彼此相邻堆叠,而不是将它们显示为它们通常所做的块。我遵循类似stackoverflow问题的建议,并将第一个内部div浮动到左侧,并将第二个内部div放到右侧。没有成功。

我将内部div向左移动并设置溢出:隐藏到包装器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/

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

1 个答案:

答案 0 :(得分:0)

设置浮动div的宽度,还是需要它们在没有特定宽度的情况下浮动?