对齐div并排和中心 [英] align divs side by side and center

问题描述

我有3个div。 1是容器，我想要那些其他两个中心并排对齐宽度相同的宽度。但它看起来像这样

我想要像这样对齐

这是我的验证码：

HTML ：

< < div id =bottom-content>
< div id =left-desc>

< / div>
< div id =description-space>

< / div>
< / div>


CSS：

 ＃bottom-content {
 border：1px solid black; 
 overflow：hidden; 
 text-align：left; 
} 
＃left-desc {
 border：1px solid orane; 
 float：left; 
 width：50％; 
 overflow：hidden; 
} 
＃description-space {
 border：1px solid orange; 
 float：right; 
 width：50％; 
 overflow：hidden; 
} 
  

解决方案

< div> 元素作为表/表单元格。

A / code>元素将不会填充其容器的宽度，所以也给它 width：100％（或任何你想要的宽度）。您应该更改容器的 box-sizing 属性，使其宽度包含边框。

 ＃bottom-content {
 border：1px solid red; 
 box-sizing：border-box; 
 display：table; 
 width：100％; 
 overflow：hidden; 
 text-align：left; 
 
} 
＃left-desc {
 border：1px solid yellow; 
 display：table-cell; 
 width：50％; 
 overflow：hidden; 
} 
＃description-space {
 border：1px solid black; 
 display：table-cell; 
 width：50％; 
 overflow：hidden; 
} 
  

JSFiddle

i have 3 divs. 1 is container and i want those other two aligned in center side by side width same width. but it looks like this

i want it to be aligned like this

here are my codes:

HTML:

<div id="bottom-content">
   <div id="left-desc">

   </div>
   <div id="description-space">

   </div>
</div>

CSS:

#bottom-content{
    border: 1px solid black;
    overflow: hidden;
    text-align: left;
}
#left-desc{
    border: 1px solid orane;
    float: left;
    width: 50%;
    overflow: hidden;
}
#description-space{
    border: 1px solid orange;
    float: right;
    width: 50%;
    overflow: hidden;
}

解决方案

Remove your floating styles and display the <div> elements as table/table-cells.

A table element won't fill the width of its container, so also give it width:100% (or whatever width you desire). You should change the box-sizing property of your container to have the width include the border.

#bottom-content{
    border: 1px solid red;
    box-sizing:border-box;
    display:table;
    width:100%;
    overflow: hidden;
    text-align: left;

}
#left-desc{
    border: 1px solid yellow;
    display:table-cell;
    width: 50%;
    overflow: hidden;
}
#description-space{
    border: 1px solid black;
    display:table-cell;
    width: 50%;
    overflow: hidden;
}

JSFiddle

这篇关于对齐div并排和中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！