顶部对齐3个浮动div [英] Top align 3 floating divs

问题描述

我试图获得3个跨越页面宽度的div以对齐顶部。这个想法是：

Left Div | Center Div |右分区

，左右分区占宽度的25％，中心占50％。我使用浮动来获得左右div对齐屏幕的两侧。但是，我的问题是，一旦我将中心div设置为50％，右侧div不再与顶部对齐。为中心设置45％的宽度可以在对齐顶部时获得理想的效果，但是中心div并不占用所有可用空间

简单的HTML展示问题：

 < div class =parent> 
< div class =title-bar>标题就在这里< / div> 
< div class =sidecontent left>一些内容< / div> 
< div class =content>更多内容越来越多更多内容越来越多内容越来越多< / div> 
< div class =sidecontent right>一些内容< / div> 
< / div> 
  

CSS

  .title-bar {
 color：@color; 
背景颜色：@标题颜色; 
 padding：5px; 
 font-family：@ font-family; 
 margin-bottom：10px; 
 font-size：20px; 
 text-align：center; 
 border：1px solid＃D5D5D5; 
 border-radius：5px; 
} 
 .left {
 float：left; 
} 
 .right {
 float：right; 
} 
 .sidecontent {
 width：25％; 
 border：1px solid＃D5D5D5; 
 display：inline-block; 
 // padding：5px; 
 vertical-align：top; 
 height：500px; 
背景颜色：红色; 
 overflow-y：auto; 
} 
 .content {
 float：left; 
 display：inline-block; 
 vertical-align：top; 
宽度：50％; 
} 
  

这里是一个展示问题的jsFiddle： http://jsfiddle.net/s6vqC/

任何帮助将不胜感激（I '新来这个CSS的东西）
谢谢。

解决方案

你已经给左边栏一个边框。如果你给一个边框，它会做25％+ 1px。所以这意味着如果你把它们加在一起，它会是100％和一些像素，因为你给它一个边界。
25％+ 50％+ 25％+ border：1px = 100％+ 1px =整个宽度屏幕+ 1px

I am trying to get 3 divs that span the width of the page to align to the top. The idea is to have:

Left Div| Center Div | Right Div

with both the left and right divs taking 25% of the width and the centre taking 50%. I am using float to get the left and right div's to align to the sides of the screen. However, my problem is that once I set the center div to 50% , the right div no longer aligns to the top. Setting 45% width for the center gets the desired effect in terms of aligning the tops, however the center div does not take up all the available space

simple HTML demonstrating the problem:

<div class="parent">
<div class="title-bar">Title goes Here</div>
<div class="sidecontent left">Some content</div>
<div class="content">More content and more and more More content and more and more More content and more and more</div>
<div class="sidecontent right">Some Content</div>
</div>

CSS

    .title-bar {
    color: @color;
    background-color: @title-color;
    padding: 5px;
    font-family: @font-family;
    margin-bottom: 10px;
    font-size: 20px;
    text-align: center;
    border: 1px solid #D5D5D5;
    border-radius: 5px;
    }
.left {
    float: left;
}
.right {
    float: right;
}
.sidecontent {
    width: 25%;
    border: 1px solid #D5D5D5;
    display: inline-block;
    //padding: 5px;
    vertical-align: top;
    height: 500px;
    background-color: red;
    overflow-y: auto;
}
.content {
    float: left;
    display: inline-block;
    vertical-align: top;
    width: 50%;
}

here is a jsFiddle demonstrating the problem: http://jsfiddle.net/s6vqC/

Any assistance would be appreciated (I'm new to this css thing) Thanks.

解决方案

you have given the left sidebar a border. If you give a border it will do 25%+1px. So that means if u add it all together it will be 100% and some pixel because u gave it a border. 25% + 50% + 25% + border:1px = 100% + 1px = whole width screen + 1px

这篇关于顶部对齐3个浮动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！