Question

我希望三个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。

请帮忙。

感谢。

Answer 1

您为#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之前检查您的印刷错误。感谢。

Answer 2

嗨很简单，只需更改样式表即可。

<强> 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/

Answer 3

试试这个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;
}

对齐三个div

3 个答案: