右列对齐问题

对不起，如果这已经在词典中，但我找不到它。我有我认为是一个非常简单的三列标题，我无法得到正确的列与左边的两列对齐。它显示在左列下方，即使有足够的空间。我有三个组成每列的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

右列对齐问题

回答

相关问题