Question

基本上我希望这些块像普通网页一样紧挨着对齐，但我似乎无法做到这一点，因为你所暗示的第一个“左”块在左边对齐了。其他“中心”和“右”块不会在“左”块旁边对齐。而是转到页面底部并相互堆叠。

如何让我的街区像真实的网页一样让彼此相邻？

顺便说一句，这是代码。

HTML

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" type="text/css" href="css.css">
   <title>Title</title>
</head>
<body>
   <h1>Title</h1>
   <div id = "Left">
       <div id= "LeftContent">
       </div>
   </div>
   <div id = "Center">
       <div id = "CenterContent">
       </div>
   </div>
   <div id = "Right">
       <div id = "RightContent" >
       </div>
   </div>
</body>
</html>

CSS

body {
    background:black;
}
h1 {
    font-size:100px;
    text-align:center;
    color:#F433FF;
    text-shadow: 0 0 10px #fff,
                 0 0 20px #fff,
                 0 0 30px #fff,
                 0 0 40px #ff00de,
                 0 0 70px #ff00de,
                 0 0 80px #ff00de,
                 0 0 100px #ff00de,
                 0 0 150px #ff00de;
}
#Left {
    background-color:yellow;
    height:1500px;
    bottom:40px;
    width:300px;
    margin-left:100px;
}             
#LeftContent {
    float:right;
}
#Center {
    background:purple;
    inline;
    height:300px;
}
#CenterContent{ }
#Right {
    background:pink;
}
#RightContent{ }

也许把它放在文本编辑器中，看看问题是什么？提前谢谢！

Answer 1

你可以这样做JSFiddle

.container {
    width: 900px;
    overflow: hidden;
}

#Left, #Center, #Right {
    float: left;
    width: 300px;
    height: 1500px;
    background: yellow; 
}

Answer 2

您可以将float属性用作：

#Left: {float:left;}             
#Center: {float:left;}
#Right: {float:left;}

如果它们适合容器（主体），它们应该彼此对齐

用html / css协助？

2 个答案: