固定寬度並排的多個div

我想要6個div並排顯示服務包。問題是我想要所有的指定像素寬度。但我無法給它們像素寬度。而且父div也會根據他們獲得的寬度進行調整，因爲我已經指定了它的80％的寬度。我查了其他帖子，但他們沒有幫助我。我工作的這個代碼...固定寬度並排的多個div

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

來源

2013-01-11 Sagar Guhe

請提供小提琴。 – I29

你有拼寫在你的CSS錯誤....您指定width as widht

來源

2013-01-11 08:47:31

謝謝@Nitesh這解決了我的問題...... !!! –

你可以給他們象素width。但是你有一個錯字。
您已寫入widht，應該是width。

來源

2013-01-11 08:44:52

雅得到它並解決了問題。謝謝 –

您可以使用此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>

這樣做對othre 5 div的

來源

2013-01-11 08:45:28 DON

謝謝！我的CSS很混亂。 –

固定寬度並排的多個div

回答

相關問題