Question

我有3个div标签。我必须把它放在一条直线上。在我的代码中它是2,3,4。 2和3是直线但4向下是dono为什么。我是html和css的初学者。准确地说，我的项目是在html的透视图中创建一个房间。并使用html canvas绘制内容。但是在开始时就已经开始了。专家请帮帮我一个出路。我在Jsfiddle附带了我的整个项目，我需要的解决方案如下所示。

http://jsfiddle.net/kGpdM/855/

Html:

<div id="wall">
<div id="sidewall1" align="left">2</div>
<div id="center" align="center">3</div>
<div id="sidewall2" align="right">4</div>
</div>

css:

#sidewall1 {
float:left;
width:250px;
height:500px;
}
#sidewall2 {
float:right;
width:250px;
height:500px;
}

Answer 1

添加到所有类或iid的样式属性display:inline;对于div 2,3,4会有。

Answer 2

计算机屏幕的宽度只需要很多像素。由于存在许多不同的屏幕宽度，因此变得复杂。例如，您有手机，平板电脑，笔记本电脑和台式机。但即使是那些也可以有不同的宽度。所以不要使用宽度：250px; ，最好以百分比形式制作所有这些div。见下文。

#sidewall1 {
float:left;
width:25%;
height:500px;
}

#center {
float: left;
width: 49%;
}

#sidewall2 {
float:left;  // Change this to float left
width:25%;
height:500px;
}

根据您的需要调整百分比。

Answer 3

将div更改为inline可能会破坏其他风格。相反，您应该更改CSS，以便最后包含中心div。我已经在CSS中添加了背景颜色来演示：

jsFiddle

<强> HTML

<div id="wall">
    <div id="sidewall1">2</div>
    <div id="sidewall2">4</div>
    <div id="center">3</div>
</div>

<强> CSS

#sidewall1 {
    float:left;
    width:250px;
    height:500px;
    background-color: yellow;
}
#center {
    display: block;
    background-color: green;
}
#sidewall2 {
    float:right;
    width:250px;
    height:500px;
    background-color: red;
}

Answer 4

你没有提到ID'center'的属性，所以div本身采用默认宽度   Div 4下降是因为总宽度（id'row'的宽度在这里为1000px） - div 3的宽度=小于250 px。
  此外，如果您通过CSS设置样式，请尽量避免使用内联样式。

Here is the modified code.

HTML

<div id="container">
    <div id="roof">1</div>
    <div id="wall">
        <div id="sidewall1">2</div>
        <div id="center" >3</div>
        <div id="sidewall2">4</div>
    </div>
    <div id="floor">5</div>
</div>

CSS

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#roof {
padding: 0px;
height: 250px;
width: 1000px;
margin-right: 0px;
margin-left: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
#wall {
padding: 0px;
height: 500px;
width: 1000px;
margin-right: 0px;
margin-left: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
#floor {
padding: 0px;
height: 250px;
width: 1000px;
margin-right: 0px;
margin-left: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
#sidewall1 {
    float:left;
    width:250px;
    height:500px;

}
#sidewall2 {
    float:left;
    width:250px;
    height: 500px;
}
#center {
    float:left;
    width:250px;
    height: 500px;
}

Div标签，直线排列

4 个答案: