三个div的对齐

我希望三个div的对齐方式与下图相同。我怎样才能做到这一点？三个div的对齐

enter image description here

我写的html代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<style type="text/css"> 
#container{ 
background-color:#00ff00; 
width:500px; 
height:500px; 
} 
#leftDiv{ 
background-color:#ff0000; 
width:250px; 
height:500px; 
} 
#rightDiv{ 
background-color:#0000fff; 
widht:250px; 
height:500px; 
} 
#other{ 
background-color:#ffff00; 
widht:500x; 
height:500px; 
} 
</style> 
</head> 
<body> 
<div id="container"> 
<div id="leftDiv"> 
</div> 
<div id="rightDiv"> 
<img src="Koala.jpg"> 
</div> 
</div> 
<div id="other"> 
</div> 
</body> 
</html>

但结果并不像我期待的是我的代码表示： enter image description here

我想提出一个图片到第二个（rightDiv）div。

请帮忙。

谢谢。

来源

2012-03-29 Tom

Stackoverflow无法显示我所有的html代码。我不知道如何让它们出现。 – Tom 2012-03-29 05:18:04

代码中没有技术缺陷。这只是一个印刷错误。 – apnerve 2012-03-29 05:41:51

嗨很简单，只需要改变你的样式表，然后做。

CSS

.container{ 
background-color:green; width:500px; 
} 

.leftDiv{ 
background-color:red; width:250px; 
height:500px; 
float:left; 
} 

.rightDiv{ 
background-color:pink; width:250px; 
height:500px; 
float:left; 
} 

.other{ 
background-color: #FFFF00; 
height:500px; 
clear:both; 
}

HTML

<div class="container"> 

    <div class="leftDiv">left</div> 
    <div class="rightDiv">right</div> 

    <div class="other">middle</div> 


</div>

，现在检查这个http://jsfiddle.net/rohitazad/PLdyw/4/

来源

2012-03-29 05:36:23

使用绝对位置不是对齐div的最佳方法。您应该使用浮动技术来取得更好的效果。 – 2012-03-29 05:49:59

@MuhammadSannanKhalid你是对的我已经更新了我的答案。 – 2012-03-29 06:05:55

@azad这是正确的，我使用你的最后一个版本代码，结果不像我想要的那样，因为在我的div中有表和其他东西。使用浮动，它现在起作用。谢谢大家。 – Tom 2012-03-29 06:16:51

您为#other编写的样式规则是错误输入的。它应该是width而不是widht。

#other{ 
    background-color:#ffff00; 
    widht:500x; /* This should have been 'width'. Resorting to StackOverflow for a typo error? :-o */ 
    height:500px; 
}

PS：在发布到StackOverflow之前，请检查您的印刷错误。谢谢。

来源

2012-03-29 05:23:27 apnerve

感谢您的回复，并对印刷错误感到抱歉。但只是正确的拼写错误没有奏效。 – Tom 2012-03-29 05:55:20

然后可能是因为图像的宽度。它可能比250px宽。如果你把'widht'改为'width'，它应该可以工作。我已经测试过了（尽管像这些小东西不需要任何测试） – apnerve 2012-03-29 13:32:10

尝试这个CSS。

.container{ 
background-color:green; width:500px; 
height:500px; 
position:relative;} 

.leftDiv{ 
    float:left; 
background-color:red; width:250px; 
height:500px; 
} 

.rightDiv{ 
background-color:pink; width:250px; 
height:500px; 
float:left; 
} 

.other{ 
background-color: #FFFF00; 
    clear:both; 
    width:500px; 
height:500px; 
}

来源

2012-03-29 05:48:21

三个div的对齐

回答

相关问题