gpt4 book ai didi

html - 协助 html/css?

转载 作者:太空宇宙 更新时间:2023-11-04 03:40:17 26 4
gpt4 key购买 nike

好吧,基本上我希望这些 block 像普通网页一样彼此紧挨着对齐,但我似乎无法做到这一点,因为第一个“左” block (正如它所暗示的那样位于左侧)确实向左对齐。其他“中心”和“右” block 不与“左” block 对齐。相反,它们会转到页面底部并相互堆叠。

如何让我的 block 像在真实网页中一样彼此相邻?

顺便说一句,这是代码。

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

也许把它放在文本编辑器中看看问题出在哪里?提前致谢!

最佳答案

你可以这样做JSFiddle

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

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

关于html - 协助 html/css?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24986048/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com