Html 如何设置平行div？_Html_Css

Html 如何设置平行div？

html css

Html 如何设置平行div？,html,css,Html,Css,我想让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&

我想让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>


#根{
背景色：#eee；
}
#左侧{
浮动：左；
}
#中央大学{
左边距：自动；
右边距：自动；
宽度：65px；
背景色：#ccc；
}
#右侧{
浮动：对；
}
左边
正确的
居中

谢谢：）


#左侧{
浮动：左；
宽度：32%；
}
#中央大学{
保证金：0自动；
宽度：32%；
背景色：#ccc；
}
#右侧{
浮动：对；
宽度：32%；
}

如果您只是想制作3列，则只需将它们全部向左浮动即可：

.wrapper {
    margin: 0 auto;
    width: 960px;
}

.column {
       float: left;
       width: 33%;
}

HTML:


左边
居中
正确的

然后只需清除包装，就完成了。这也是更好的，因为它是一个很好的实践，让html中的所有内容按照代码中的顺序显示在屏幕上。使用您的方法，中柱实际上位于右柱之后，您希望避免此情况。

不是脚本。写样式而不是脚本。有语法错误。像这样

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


#根{
背景色：#eee；
}
#左侧{
浮动：左；
}
#中央大学{
左边距：自动；
右边距：自动；
宽度：65px；
背景色：#ccc；
}
#右侧{
浮动：对；
}

一些事情首先，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>


#根{
背景色：#eee；
}
#左侧{
浮动：左；
宽度：65px；
}
#中央大学{
浮动：左；
宽度：65px；
背景色：#ccc；
}
#右侧{
浮动：左：
宽度：65px；
}
.clear{clear:两者；}
左边
居中
正确的

在外部分区上使用flex容器，在内部分区上使用flex项目。如有任何进一步的参考，请跟随。

在我看来不错。怎么了？“不工作”是怎么回事？你用的是哪个浏览器？@j08691:我不知道出了什么问题，我只是在notpad上创建了一个html文件并粘贴了这个。我在firefox、chrome上打开了它…它只是一个接一个地显示垂直书写的左-右中心。我看到了问题，你的CSS

标记在你的代码中错误地显示为

标记。这种方法无法解决div没有按照它们在代码中的顺序显示的问题。它也不会声明所有div的宽度。

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

<!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>