Question

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

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

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

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

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

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

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

Answer 1

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

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

Answer 2

您的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;

Answer 3

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

Answer 4

您是否考虑过使用浮动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'

嵌套的浮动div不起作用

4 个答案: