Html 如何设置并行 DIV？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9930937/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set parallel DIVs?
提问by Dhruv
Hey guys I want to have 3 aligned parallel to each other. I have seen few examples over internet but somehow they are not working for me. My html file is follows:
嘿伙计们，我想让 3 个彼此平行对齐。我在互联网上看到的例子很少，但不知何故它们对我不起作用。我的html文件如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/css">
#root {
background-color: #eee;
}
#left_side {
float: left;
}
#center_s {
margin-left: auto;
margin-right: auto;
width: 65px;
background-color: #ccc;
}
#right_side {
float: right;
}
</script>
</head>
<body>
<div id="root">
<div id="left_side">LEFT</div>
<div id="right_side">RIGHT</div>
<div id="center_s">CENTER</div>
</div>
</body>
</html>
Thanks :)
谢谢 ：）
采纳答案by AliR?za Ad?yah?i
not script. write style instead of script. there is syntax error. like this.
不是脚本。写风格而不是脚本。有语法错误。像这样。
<style type="text/css">
#root {
background-color: #eee;
}
#left_side {
float: left;
}
#center_s {
margin-left: auto;
margin-right: auto;
width: 65px;
background-color: #ccc;
}
#right_side {
float: right;
}
</style>
回答by Brian Hough
If you are just trying to make 3 columns then just float them all left:
如果您只是想制作 3 列，那么只需将它们全部向左浮动：
.wrapper {
margin: 0 auto;
width: 960px;
}
.column {
float: left;
width: 33%;
}
HTML:
HTML：
<div class="wrapper">
<div class="column">left</div>
<div class="column">center</div>
<div class="column">right</div>
</div>
Then just clearfix the wrapper and you're done. This is also better because its good practice to have everything in your html appear on screen in the order that it is in your code. Using your method the center column is actually after the right column, which you want to avoid.
然后只需清除包装器即可完成。这也更好，因为它的良好做法是让 html 中的所有内容按照它在代码中的顺序出现在屏幕上。使用您的方法，中心列实际上是在您想要避免的右列之后。
回答by JBarnes
A few things
A first, your tags for the css should be 'style', not 'script'
- you also have to declare the width of the DIVs
- have them all float left
- put the in the order you want from left to right
一些事情首先，你的 css 标签应该是“样式”，而不是“脚本”
——你还必须声明 DIV 的宽度
——让它们都向左浮动
——按照你想要的顺序从左到右放置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#root {
background-color: #eee;
}
#left_side {
float: left;
width:65px;
}
#center_s {
float:left;
width:65px;
background-color: #ccc;
}
#right_side {
float: left:
width:65px;
}
.clear{clear:both;}
</style>
</head>
<body>
<div id="root">
<div id="left_side">LEFT</div>
<div id="center_s">CENTER</div>
<div id="right_side">RIGHT</div>
</div>
<div class="clear"></div>
</body>
</html>
回答by user2056463
Use flex-container on outer div and flex-item on inner div's. Follow https://www.w3schools.com/css/css3_flexbox.aspfor any further references.
在外部 div 上使用 flex-container，在内部 div 上使用 flex-item。按照https://www.w3schools.com/css/css3_flexbox.asp获取任何进一步的参考。
回答by Antarr Byrd
<style type="text/css">
#left_side {
float: left;
width: 32%;
}
#center_s {
margin: 0 auto;
width: 32%;
background-color: #ccc;
}
#right_side {
float: right;
width: 32%;
}
</style>
