Divs不能替换表 [英] Divs Can't Replace A Table
问题描述
我想用两个div做一些看起来很基本的东西，但是我不会认为可以做到这一点。表可以快速完成。我确信css是布局的方式，但是没有能够做到最简单的事情，我不知道怎么做。我不知道怎么做。
这是进行布局的表格方式（我想在所有现代浏览器中使用
合规模式。）：
<！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.0 Transitional // EN"
" http：//www.w3.org/tr/xhtml1/ dtd / xhtml1-loose.dtd">
< html>
< head>
< style type =" text / css">
body {margin：0px; height：100％;}
< / style>
< / head> ;
< body>
< table style =" height：100％;" CELLPADDING = QUOT; 0" cellspacing =" 0">
< tr>
< td style =" background-color：blue">
一些文字
< / td>
< td style =" background-color：red; width：100％; text-align：center">
< div style =" width：400px">
更多文字更多文字
< / div>
< / td>
< / tr>
< / table>
< /正文>
< / html>
我想让左栏缩小以适合文字和右边
列为左侧视口的100％。听起来很简单。
这就是在IE中不起作用的东西。你会注意到，只要你用视口触摸了400px div，就会把整个东西都掉到底部。
<！doctype html public" - // w3c // dtd html 4.0 transitional // en"
" http：//www.w3.org/tr/xhtml1/dtd/xhtml1-loose.dtd"> ;
< html>
< head>
< style type =" text / css">
body {margin：0px; height：100％;}
#nav {float：left; height：100％; background-color：blue;}
#content {height：100％; background-color：red; text-align：center;}
< / style>
< / head>
< body>
< div id =" nav">
一些文字
< / div>
< div id =" content">
< div style =" width：400px">
更多文本更多文本
< / div>
< / div>
< / body>
< / html>
Tyler
I would like to do something that seems so basic with two div''s but I
don''t think it can be done. Tables can do it in a snap. I was
convinced that css was the way to go for layout but without being able
to do even the easiest things, I don''t see how.
Here is the table way to do the layout (I want this to work in
compliance mode in all modern browsers.):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-loose.dtd">
<html>
<head>
<style type="text/css">
body{margin:0px;height:100%;}
</style>
</head>
<body>
<table style="height:100%;" cellpadding="0" cellspacing="0">
<tr>
<td style="background-color:blue">
Some Text
</td>
<td style="background-color:red;width:100%;text-align:center">
<div style="width:400px">
A Lot More Text A Lot More Text
</div>
</td>
</tr>
</table>
</body>
</html>
I want to have the left column shrink to fit the text and the right
column to be a 100% of the left over viewport. Sounds simple.
Here''s what won''t work in IE. You''ll notice that as soon as you touch
the 400px div with the viewport the whole thing drops to the bottom.
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-loose.dtd">
<html>
<head>
<style type="text/css">
body{margin:0px;height:100%;}
#nav{float:left;height:100%;background-color:blue;}
#content{height:100%;background-color:red;text-align:center;}
</style>
</head>
<body>
<div id="nav">
Some Text
</div>
<div id="content">
<div style="width:400px">
A Lot More Text A Lot More Text
</div>
</div>
</body>
</html>
Tyler
推荐答案
Tyler Carver写道：
Tyler Carver wrote:
我希望左列缩小以适合文本和右边
列为左侧视口的100％。听起来很简单。
这就是在IE中不起作用的东西。你会注意到，一旦你用视口触摸400px div，整个东西就会掉到底部。
<！doctype html public" - // w3c / / dtd html 4.0 transitional // en"
" http：//www.w3.org/tr/xhtml1/dtd/xhtml1-loose.dtd">
< html>
< head>
< style type =" text / css">
body {margin：0px; height：100％;}
#nav {float：left; height ：100％;背景颜色：蓝色;}
#content {height：100％; background-color：red; text-align：center;}
< / style>
< ; / head>
< body>
< div id =" nav">
一些文字
< / div>
< div id =" content">
< div style =" width：400px">
更多文字更多文字
< / div>
< ; / div>
< / body>
< / html>
I want to have the left column shrink to fit the text and the right
column to be a 100% of the left over viewport. Sounds simple.
Here''s what won''t work in IE. You''ll notice that as soon as you touch
the 400px div with the viewport the whole thing drops to the bottom.
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-loose.dtd">
<html>
<head>
<style type="text/css">
body{margin:0px;height:100%;}
#nav{float:left;height:100%;background-color:blue;}
#content{height:100%;background-color:red;text-align:center;}
</style>
</head>
<body>
<div id="nav">
Some Text
</div>
<div id="content">
<div style="width:400px">
A Lot More Text A Lot More Text
</div>
</div>
</body>
</html>
是的，这称为液体布局，您已创建通过使用
相对定位，这是css的默认值。如果您不想移动任何东西，请使用绝对定位。这是一种方法：
<！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.01 // EN"
" ; http：//www.w3.org/TR/html4/strict.dtd">
< html>
< head>
< title> test< / title>
< style type =" text / css">
body {margin：0px; height：100 ％;}
#nav {position：absolute;背景色：蓝色;宽度：100px;
身高：100％;}
#content {position：absolute;左：100px的;宽度：100％;身高：100％;
背景颜色：红色;文本对齐：中心; }
< / style>
< / head>
< body>
< div id =" nav">
一些文字
< / div>
< div id =" content">
更多文字更多文字
< / div>
< / body>
< / html>
Yes this is called a liquid layout, which you have created by using
relative positioning, which is the default for css. If you don''t want
anything to move, use absolute positioning. Here is one way to do it:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
body{margin:0px;height:100%;}
#nav{position:absolute; background-color:blue; width:100px;
height:100%;}
#content{position:absolute; left:100px; width:100%; height:100%;
background-color:red; text-align:center; }
</style>
</head>
<body>
<div id="nav">
Some Text
</div>
<div id="content">
A Lot More Text A Lot More Text
</div>
</body>
</html>
Tyler Carver写道：
Tyler Carver wrote:
我希望左列缩小以适应文本和右边的列是左边视口的100％。听起来很简单。
这就是在IE中不起作用的东西。你会注意到，一旦你用视口触摸400px div，整个东西就会掉到底部。
<！doctype html public" - // w3c / / dtd html 4.0 transitional // en"
" http：//www.w3.org/tr/xhtml1/dtd/xhtml1-loose.dtd">
< html>
< head>
< style type =" text / css">
body {margin：0px; height：100％;}
#nav {float：left; height ：100％;背景颜色：蓝色;}
#content {height：100％; background-color：red; text-align：center;}
< / style>
< ; / head>
< body>
< div id =" nav">
一些文字
< / div>
< div id =" content">
< div style =" width：400px">
更多文字更多文字
< / div>
< ; / div>
< / body>
< / html>
I want to have the left column shrink to fit the text and the right
column to be a 100% of the left over viewport. Sounds simple.
Here''s what won''t work in IE. You''ll notice that as soon as you touch
the 400px div with the viewport the whole thing drops to the bottom.
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-loose.dtd">
<html>
<head>
<style type="text/css">
body{margin:0px;height:100%;}
#nav{float:left;height:100%;background-color:blue;}
#content{height:100%;background-color:red;text-align:center;}
</style>
</head>
<body>
<div id="nav">
Some Text
</div>
<div id="content">
<div style="width:400px">
A Lot More Text A Lot More Text
</div>
</div>
</body>
</html>
这称为液体布局，你是通过使用创建的相对
定位，这是css的默认值。如果你不想要任何东西来b / b $ b移动，请使用绝对定位。这是一种方法：
<！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.01 // EN"
" ; http：//www.w3.org/TR/html4/strict.dtd">
< html>
< head>
< title> test< / title>
< style type =" text / css">
body {margin：0px; height：100 ％;}
#nav {position：absolute;背景色：蓝色;宽度：100px;
身高：100％;}
#content {position：absolute;左：100px的;宽度：100％;身高：100％;
背景颜色：红色;文本对齐：中心; }
< / style>
< / head>
< body>
< div id =" nav">
一些文字
< / div>
< div id =" content">
更多文字更多文字
< / div>
< / body>
< / html>
This is called a liquid layout, which you have created by using relative
positioning, which is the default for css. If you don''t want anything to
move, use absolute positioning. Here is one way to do it:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
body{margin:0px;height:100%;}
#nav{position:absolute; background-color:blue; width:100px;
height:100%;}
#content{position:absolute; left:100px; width:100%; height:100%;
background-color:red; text-align:center; }
</style>
</head>
<body>
<div id="nav">
Some Text
</div>
<div id="content">
A Lot More Text A Lot More Text
</div>
</body>
</html>
2004年7月21日14:24:02 -0700， xf ********** @ yahoo.com （Tyler Carver）
写道：
On 21 Jul 2004 14:24:02 -0700, xf**********@yahoo.com (Tyler Carver)
wrote:
我想用两个div做一些看起来很基本的东西，但我不认为可以做到......
I would like to do something that seems so basic with two div''s but I
don''t think it can be done...
当然可以;有很多有趣的想法可以实现
已经只有CSS1属性了。
< http://www.css.nu/ articles / table-in-css.html>
你当然应该忘记使用Transitional和Transitional。 < DOCTYPE ...
声明并确保您的浏览器以最佳的
可能的呈现模式运行。
- -
雷克斯
Sure you can; there''s a lot of interesting ideas that can be realized
already with CSS1 properties only.
<http://www.css.nu/articles/table-in-css.html>
You should of course forget the use of a "Transitional" <DOCTYPE...
declaration and make sure that your browser operates in its best
possible rendering mode.
--
Rex
这篇关于Divs不能替换表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
