css - 三个div的对齐方式

标签 css html

我想要三个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

我想将图片放入 2nd(rightDiv) div。

请帮忙。

谢谢。

最佳答案

您为 #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 之前,请检查您的排版错误。谢谢。

关于css - 三个div的对齐方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9919463/

相关文章:

jquery - 将 html 列表 ul/li 保存在 asp.net contentplaceholder 中

html - 定义宽度 :100% in css file, 在 chrome 中不起作用

css - Amcharts:如何在 valueAxis svg 元素中应用变换

html - 使用 bootstrap 重新排列 div

html - Chrome 和 Opera 拒绝从 flex : 0 to flex: 1 过渡

JQuery - 淡入新背景图像?

html - 从 css 下拉菜单的顶部元素中删除链接和样式

javascript - 如何将页面中的图像保存到文件夹

事件处理

javascript - jQuery on click div 具有 100% 屏幕高度