嵌套的浮动div不起作用

时间:2014-12-21 03:03:34

标签: html css

在我正在编码的网站上,我有一个居中的DIV,其中包含一个浮动左列和一个较小的浮动右列。这很好。

在左浮动列中,我有一个左侧浮动列,包含生物图像,以及包含生物文本的浮动右侧文本列。

然而,我正把我的电脑扔到窗外,因为最后两个生物div是彼此叠加的,文本位于照片下面而不是漂浮在旁边它

我把清除div和溢出的每一个组合:隐藏;我可以合理地想到,但无济于事。

相关网页位于:http://test.phantomlimb.net/about.php,CSS位于此处:http://test.phantomlimb.net/phantom.css

我非常感谢任何人指出我正确的方向来解决这个烦人的难题,然后我分解并且 * gasp!* 在大约3分钟内使用表来实现相同的效果!

PS我更像是一名设计师而非编码员,所以请随意向孩子解释事情。

4 个答案:

答案 0 :(得分:0)

你尝试过这个吗? 添加浮动:左;到phantom.css中的.bioleft类

或者添加float:right;你的.bioright课程

答案 1 :(得分:0)

您的css文件中缺少冒号。例如你有

.bioleft {
    float left; /* HERE */
    width: 25%;
    background: red;
    display: block; 
}

.bioright {
    float right; /* AND HERE */
    width: 70%;
    background: cyan;
    display: block; 
}

您应该float: left;float: right;

答案 2 :(得分:0)

IT是因为你的语法不正确而浮动;它应该是float:left;

答案 3 :(得分:0)

您是否考虑过使用浮动div作为容器的左右div,然后只使用浮动div中div的内联块?

<div id="left">
    <div id="img"></div>
    <div id="content"></div>
</div>

并且

#left {
    float: left;
}
#img,#content {
    display:inline-block;
}
#img {
    width: 100px;
}
#content {
    width: calc(100% - 100px);
}

这应该将图像和内容并排放置,但它们将被视为块div。

你实际上可以将图像和内容div放在他们自己的容器div中,并将biog命名为id,以创建自己的'block'