1

如何将两个 div 并排放置，其中一个在两个 div 的容器中居中

如何将第二个 div 直接放在第一个 div 旁边并使其扩展到右侧？

这是一个例子：

http://jsfiddle.net/Dpcq4/3/

HTML：

<div id="container" >
    <div id="div1"> </div>
    <div id="div2"></div>
</div>

CSS：

  #container{ width: 100%;
              display:inline;
              height:60px;
              color:#000;
    }
    #div1{ margin-left:auto;
           margin-right:auto;
           width:200px;
           height:50px;
           background-color:#333;
    }
    #div2{ float:right;
           width:100%;
           height:50px;
           background-color:#ccc;
    }

谢谢。

4

6 回答 6

2

看看这个：http: //jsfiddle.net/GTduj/2/

#container{ 
    width: 600px; 
    height:60px; 
    border:1px solid #bbb;
    text-align:center;
}

您的容器元素需要固定宽度，并且您希望将其内容居中。

#div1{        
    width:60%;
    display:inline-block;
    height:50px;     
    background-color:#333; 
}

div1 可以是 % 宽度或固定的，但它需要是内联块。

#div2{        
    display:inline-block;
     width:10%; 
    height:50px; 
    background-color:#ccc; 
    margin-right:0;    
    position:absolute;    
}

对 div2 使用 inline-block 和绝对位置，因此它会在您居中的 div1 之后挂起。

于 2013-03-20T21:58:03.383 回答
0

只是给float:left你div1，并确保这一点：

width(div1) + width(div2) <= width(Screen)

所以，你想div2占用其余的空间，所以给两个 div 百分比宽度，即给 div1 30% 宽度和 div2 70% 宽度。

看到这个小提琴

更新：

所以你希望div1总是在 的中心#container，然后给它left:50%并相应地调整div2

如果那是你想要的，请看这个小提琴。

于 2013-03-20T21:39:26.530 回答
0

用 margin: auto 将一个 div 居中在另一个 div 中，这意味着您正在使用包含 div 的整个宽度。将 div1 放在您指定宽度的另一个 div 中，然后将 div1 浮动在其中。

<div id="container" >
  <div class="container">
    <div id="div1"> </div>
  </div>
  <div id="div2"></div>
</div>

.container{
  width: x%;
  float: left;
 }

#div2{
 float: left;
}
于 2013-03-20T21:41:16.807 回答
0

假设您不希望左侧的空白区域需要删除，margin-left:auto;并且您还需要更改宽度。margin-right:auto;#div1.#div2

像这样的东西：

#div1{
    width:200px; 
    height:50px; 
    background-color:#333; 
    float:left;
}
#div2{
    width:75%; 
    height:50px; 
    background-color:#ccc; 
    margin-right:0; 
    float:left;
}

但是，如果这意味着流动，我也会将#div1宽度更改为百分比。类似的东西width:25%;; 如果您打算在两个 div 的左侧有空白，那么您需要在左侧添加 div 以充当列。

http://jsfiddle.net/Dpcq4/12/

于 2013-03-20T21:44:38.660 回答
0

这是我知道的方法。也许其他人可以告诉我们一个更好的方法。

首先，像这样硬编码css中的宽度

#container{ 
    width: 600px; 
    height:60px; 
    color:#000;
}
#div1{
    float: left;
    width:200px; 
    height:50px; 
    background-color:#333; 
    margin-left: 200px;
}
#div2{
    float:left; 
    width:200px; 
    height:50px; 
    background-color:#ccc; 
    margin-right:0;
}

如果这不是一个选项，我敢肯定它可能不会，另一个解决方案将使用 javascript。我将在示例中使用 jquery。

var container = $('#container1');
var div1 = $('#div1');

div1.css('margin-left', container.width()/2-div1.width());

http://jsfiddle.net/Dpcq4/9/

于 2013-03-20T21:48:50.650 回答
0

我的方法适用于 ie8 及更高版本以及所有其他浏览器，并严格使用 css。
通过使用 display:table 然后 display:table-cell 作为它的子元素，它将两个元素保持在同一表格行中。

#container{ 
   width: 100%; 
   display:table; 
   height:60px; 
   color:#000;
}
#div1{
   margin-left:auto; 
   margin-right:auto; 
   width:200px; 
   height:50px; 
   background-color:#333;
   display:table-cell; 
}
#div2{
   display:table-cell;
   height:50px; 
   background-color:#ccc; 
   margin-right:0;
   float:left;
   width:100%; 
}

http://jsfiddle.net/Dpcq4/13/

于 2013-03-20T22:03:55.983 回答