我怎样才能在一个容器中放置两个浮动元素？ [英] How can I center two floated elements within a container?

问题描述

这让我疯狂。我对这个东西比较陌生，所以试图在过去的一个小时里找出这个问题。如果有人能帮助我，我会非常感激。

我有以下代码：

 < div class = middle_box > 
< div class =box left> 
一些大文本
< / div> 
< div class =box right> 
一些大文本以及
< / div> 
< / div> 
  

CSS：

  .middle_box {
 height：260px; 
 margin：0 auto; 
 width：960px; 
} 
 .box {
 float：left; 
 font-size：21px; 
 margin-right：50px; 
 margin-top：25px; 
 padding-top：25px; 
 width：390px; 
} 
  

正如你可以判断容器的宽度是960px。现在，我想将两个.box元素居中放在960像素容器内，这就是我迷失的地方。

我尝试了什么？

我试过使用 margin：0px auto; 我尝试通过在两边添加margin-left来伪造它，但它不起作用。我怎样才能做到这一点？

解决方案

当您使用固定宽度时， 960px 和 390px ，为什么不设置边距呢？很容易计算，在这种设置中，不需要高级CSSmagic。

  .middle_box {
 height： 260px; 
 margin：0 auto; 
 width：960px; 
背景颜色：红色; 
} 
 .box {
 float：left; 
 font-size：21px; 
 margin-left：60px; / *< --- * / 
 margin-top：25px; 
 padding-top：25px; 
 width：390px; 
 background-color：yellow; 
} 
  

This is driving me crazy. I am relatively new to this stuff so trying to figure this one out for the past hour. I'll be really thankful if someone can help me with this.

I have the following code:

<div class="middle_box">
     <div class="box left">
          Some large text
     </div>
     <div class="box right">
          Some large text as well
     </div>
</div>

CSS:

.middle_box {
    height: 260px;
    margin: 0 auto;
    width: 960px;
}
.box {
    float: left;
    font-size: 21px;
    margin-right: 50px;
    margin-top: 25px;
    padding-top: 25px;
    width: 390px;
}

As you can tell the width of the container is 960px. Now, I want to center the two .box elements within the 960px container and that's where I am lost.

What did I try?

I tried using margin: 0px auto; and I tried faking it by adding margin-left on both sides but it just didn't work. How can I achieve this?

解决方案

When you are using fixed widths anyway, 960px and 390px, why not set the margin as well? Easy to calculate, no need for advanced CSS "magic" here in such setup.

.middle_box {
    height: 260px;
    margin: 0 auto;
    width: 960px;
    background-color: red;
}
.box {
    float: left;
    font-size: 21px;
    margin-left: 60px; /* <--- */
    margin-top: 25px;
    padding-top: 25px;
    width: 390px;
    background-color: yellow;
}

这篇关于我怎样才能在一个容器中放置两个浮动元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！