右列對齊問題

對不起，如果這已經在詞典中，但我找不到它。我有我認爲是一個非常簡單的三列標題，我無法得到正確的列與左邊的兩列對齊。它顯示在左列下方，即使有足夠的空間。我有三個組成每列的div，並且我猜測問題出在那裏。右列對齊問題

這裏是我使用的CSS：

body { 
    background-color: #ffaa00; 
} 
#container { 
    width: 1268px; 
    height: 900px; 
    background-color: #fff; 
    margin: 0 auto; 
} 
/* header styles */ 
#main { 
    height: 110px; 
    width: 715px; 
    margin: 0 auto; 
    background-color: #ccc; 
    border-radius: 6px; 
} 
#frame { 
    height: 100px; 
    width: 705px; 
    background-color: #336699; 
    position: relative; 
    top: 5px; 
    left: 5px; 
    border-radius: 6px; 
} 
#content { 
    height: 90px; 
    width: 695px; 
    background-color: #ffc; 
    position: relative; 
    top: 5px; 
    left: 5px; 
    border-radius: 5px; 
    text-align: center; 
    vertical-align: ; 
} 
/* left header */ 
#left { 
    float: left; 
    height: 110px; 
    width: 268px; 
    margin: 0 auto; 
    background-color: #ccc; 
    border-radius: 6px; 
} 
#left-frame { 
    height: 100px; 
    width: 258px; 
    background-color: #336699; 
    position: relative; 
    top: 5px; 
    left: 5px; 
    border-radius: 6px; 
} 
#left-content { 
    height: 90px; 
    width: 248px; 
    background-color: #ffc; 
    position: relative; 
    top: 5px; 
    left: 5px; 
    border-radius: 5px; 
    text-align: center; 
} 
/* right header */ 
#right { 
     display:inline-block; 
    float: right; 
    height: 110px; 
    width: 268px; 
    background-color: #ccc; 
    border-radius: 6px; 
} 
#right-frame { 
     display:inline-block; 
    height: 100px; 
    width: 258px; 
    background-color: #336699; 
    position: relative; 
    top: 5px; 
    left: 5px; 
    border-radius: 6px; 
} 
#right-content { 
     display:inline-block; 
    height: 90px; 
    width: 248px; 
    background-color: #ffc; 
    position: relative; 
    top: 5px; 
    left: 5px; 
    border-radius: 5px; 
} 
h1 { 
    display: inline-block; 
    margin-top: 15px; 
    font-size: 3em; 
    font-family: lucida grande; 
    color: #336699; 
}

和HTML：

<body> 
<div id="container"> 
    <div id="left"> 
     <div id="left-frame"> 
      <div id="left-content"> 

       <img src="images/keyboard.jpeg" style="width:248px; height:90px; border-radius:5px;" 
       alt="this is a picture"> 

      </div> 
     </div> 

    </div> 

    <div id="main"> 
     <div id="frame"> 
      <div id="content"> 

       <h1>HERE IS A HEADING!</h1> 

      </div> 
     </div> 

    </div> 

    <div id="right"> 
     <div id="right-frame"> 
      <div id="right-content"> 

      </div> 
     </div> 

    </div> 
</div>

任何有識之士的讚賞。

來源

2014-10-29 MJMacarty

你真正需要做的只是浮動三個元素左，如果你想間距然後設置左/右邊距#main。此解決方案可以正確保持文檔流中的所有項目。

#main { 
    height: 110px; 
    width: 715px; 
    margin: 0 8px; /* changed 'auto' to '8' to even up padding */ 
    background-color: #ccc; 
    border-radius: 6px; 
    float: left; /* added float */ 
} 

#left { 
    float: left; 
    height: 110px; 
    width: 268px; 
    margin: 0; /* removed 'auto' because it isn't necessary when floated */ 
    background-color: #ccc; 
    border-radius: 6px; 
} 

#right { 
    display:inline-block; 
    float: right; /* no need to adjust this */ 
    height: 110px; 
    width: 268px; 
    background-color: #ccc; 
    border-radius: 6px; 
}

JSFiddle Demo

來源

2014-10-29 00:33:35 JRulle

真棒。謝謝。 – MJMacarty 2014-10-30 12:38:08

右列對齊問題

回答

相關問題