0

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;
}
4

3 に答える 3

4

あなたはそれらにピクセルを与えることができますwidth。しかし、タイプミスがあります。
あなたが書いたwidht、それはあるべきですwidth。

于 2013-01-11T08:44:52.517 に答える
1

cssにスペルミスがあります...幅をwidhtとして指定しました

于 2013-01-11T08:47:31.337 に答える
0

あなたはこれを使うことができますCSS

#content { width: 100%; height: 150px; }
#p-col1, #p-col2, #p-col3, #p-col4, #p-col5, #p-col6 { width: 16%; height: 150px; float: left; }

また

.service-div { width: 16%; height: 150px; float: left; }

<div id="p-col1 service-div">
            <ul>
                <li><h1>heading</h1></li>
                <li>text text text </li>
                <li class="grey">text text text </li>
            </ul>
        </div>

div他の5の場合はこれを行います

于 2013-01-11T08:45:28.160 に答える