Question

我再次遇到DIV标签的问题。我已设法使用户屏幕分为3列。但我现在正试图为每个div添加一个单独的背景。但风格=“背景：蓝色;”或style =“background-color：blue;”似乎没有用。

任何帮助将不胜感激：）

http://prntscr.com/2kde62＆lt; - 我希望它看起来像（我用图片作为背景）

http://prntscr.com/2kdedk＆lt; - 即使使用style =“background：blue;”它看起来像什么

以下代码：

<div id='leftDiv' style="float:left; margin:0; width:33%;" align="center">

       <img style="position:absolute; top:160; left:170;" onclick="addKittens()" src="http://imgur.com/3mj6PL5.jpg" width="192" height="192">
</div>

<div id='middleDiv' style="float:left; margin:0; width:33%;" align="left">

    <img style="position:absolute; top:200; left:650;" onclick='crazyLadyAdd()' src="http://imgur.com/7sucpdi.jpg" width="96" height="96"> <!-- Crazy Cat Lady image --> 
    <img style="position:absolute; top:300; left:650;" onclick='milkFactoryAdd()' src="http://imgur.com/Q9y4xBJ.png" width="96" height="96"> <!-- Milk Factory image --> 
</div>

<div id='rightDiv' style="float:left; margin:0; width:33%; background:blue;" align="center">
    <p style="position:absolute; left:1200; color:red; font-size:20;"> PLACEHOLDER </p>  
</div>

Answer 1

似乎所有div都没有 height 属性。通常，div包裹它的子块，即你的情境中的img。但是，您已设置了img position:absolute，因此父div无法正确获取高度。

Answer 2

您是否尝试过添加：

{background-color:#b0c4de;}

到那个布局的CSS？在CSS＃中创建'rightDiv'，你可以在上面的代码中加载它。

Answer 3

尝试添加

Overflow:hidden

到所有三列，如果高度固定，添加

height:xyzpx

到所有三个div。

Answer 4

这是您案例的工作示例。图像上的绝对位置使它变得混乱。

<div id='leftDiv' style="float:left;margin:0; width:33%;background:yellow   ;" align="center">

       <img onclick="addKittens()" src="http://imgur.com/3mj6PL5.jpg" width="192" height="192">
</div>

<div id='middleDiv' style="float:left;margin:0; width:33%;background:red;" align="left">

    <img style="width:96;height:96;margin-top:200px" onclick='crazyLadyAdd()' src="http://imgur.com/7sucpdi.jpg" /> <!-- Crazy Cat Lady image --> 
    <img onclick='milkFactoryAdd()' src="http://imgur.com/Q9y4xBJ.png" width="96" height="96" /> <!-- Milk Factory image --> 
</div>

<div id='rightDiv' style="float:left; margin:0; width:33%; background:blue;" align="center">
    <p style="color:red; font-size:20;"> PLACEHOLDER </p>  
</div>

你应该能够自己弄清楚图像的高度。但是在所有元素上停止使用绝对。在div中添加高度也可以解决您的问题。

Answer 5

由于将图像置于绝对位置，div框没有高度。给它们100％的高度，你可以设置它们的样式或将图像放在中心而不是绝对的。

Div标签背景颜色CSS HTML

5 个答案: