gpt4 book ai didi

css - 固定宽度并排的多个div

转载 作者:太空宇宙 更新时间:2023-11-03 20:52:36 25 4
gpt4 key购买 nike

我想要 6 个并排的 div 来显示服务包。问题是我想要它们都具有指定的像素宽度。但我无法给他们一个像素宽度。而且父 div 正在调整为它们获得的宽度,因为我已经为其指定了 80% 的宽度。我检查了其他帖子,但他们没有帮助我。我正在编写这段代码...

<div id="main">
<div id="content" class="shadow">
<div id="p-col1">
<ul>
<li><h1>heading</h1></li>
<li>text text text </li>
<li class="grey">text text text </li>
</ul>
</div>
<div id="p-col2">
<ul>
<li><h1>Heading</h1></li>
<li>text text </li>
</ul>
</div>
<div id="p-col3">
<ul>
<li><h1>Heading</h1></li>
<li>text text </li>
</ul>
</div>
<div id="p-col4" class="shadow">
<ul>
<li><h1>Heading</h1></li>
<li>text text </li>
</ul>
</div>
<div id="p-col5">
<ul>
<li><h1>Heading</h1></li>
<li>text text </li>
</ul>
</div>
<div id="p-col6">
<ul>
<li><h1>Heading</h1></li>
<li>text text </li>
</ul>
</div>
</div>

</div><!-- End of Main -->

CSS:

   #main{
width:80%;
margin:0 auto;
border:0px;
font-size:18px;
}
.shadow {
box-shadow:3px 0 10px #222 , -3px 0 10px #222;
-moz-box-shadow:3px 0 10px #222 , -3px 0 10px #222;
-webkit-box-shadow:3px 0 10px #222 , -3px 0 10px #222;
}
#main #content{
float:left;
display:inline-block;
padding:0;
position:relative;
padding:10px 10px 10px 10px;
}
#p-col1{
widht:100px;
background-color:#FFFFFF;
border-radius:10px 10px 10px 10px;
-moz-border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;
float:left;
position:relative;
}
#p-col1 h1{
color:#ffffff;
background-color:#d1ebf1;
padding:25px 5px 5px 5px;
font-size:20px;
font-weight:bolder;
text-align:center;
border-radius:10px 10px 0 0;
-moz-border-radius:10px 10px 0 0;
-webkit-border-radius:10px 10px 0 0;
}
#p-col2{
widht:100px;
background-color:#7098e0;
border-radius:10px 10px 10px 10px;
-moz-border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;
float:left;
position:relative;
}
#p-col2 h1{
color:#ffffff;
background-color:#0152e7;
padding:25px 5px 5px 5px;
font-size:20px;
font-weight:bolder;
text-align:center;
border-radius:10px 10px 0 0;
-moz-border-radius:10px 10px 0 0;
-webkit-border-radius:10px 10px 0 0;
}
#p-col3{
widht:100px;
background-color:#778cdd;
border-radius:10px 10px 10px 10px;
-moz-border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;
float:left;
position:relative;
}
#p-col3 h1{
color:#ffffff;
background-color:#012edd;
padding:25px 5px 5px 5px;
font-size:20px;
font-weight:bolder;
text-align:center;
border-radius:10px 10px 0 0;
-moz-border-radius:10px 10px 0 0;
-webkit-border-radius:10px 10px 0 0;
}
#p-col4{
widht:100px;
background-color:#75c3d7;
border-radius:10px 10px 10px 10px;
-moz-border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;
float:left;
position:relative;
}
#p-col4 h1{
color:#ffffff;
background-color:#01abd8;
padding:25px 5px 5px 5px;
font-size:20px;
font-weight:bolder;
text-align:center;
border-radius:10px 10px 0 0;
-moz-border-radius:10px 10px 0 0;
-webkit-border-radius:10px 10px 0 0;
}
#p-col5{
widht:100px;
background-color:#729fcc;
border-radius:10px 10px 10px 10px;
-moz-border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;
float:left;
position:relative;
}
#p-col5 h1{
color:#ffffff;
background-color:#0b6dd0;
padding:25px 5px 5px 5px;
font-size:20px;
font-weight:bolder;
text-align:center;
border-radius:10px 10px 0 0;
-moz-border-radius:10px 10px 0 0;
-webkit-border-radius:10px 10px 0 0;
}
#p-col6{
widht:100px;
background-color:#7098e0;
border-radius:10px 10px 10px 10px;
-moz-border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;
float:left;
position:relative;
}
#p-col6 h1{
color:#ffffff;
background-color:#0189d4;
padding:25px 5px 5px 5px;
font-size:20px;
font-weight:bolder;
text-align:center;
border-radius:10px 10px 0 0;
-moz-border-radius:10px 10px 0 0;
-webkit-border-radius:10px 10px 0 0;
}
li.grey{
background-color:#e3e8e9;
}

最佳答案

你可以给他们像素宽度。但是你打错了。 你写的是width,应该是width

关于css - 固定宽度并排的多个div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14274399/

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