Question

我正在尝试将3个div内联对齐

我有

#header {
    width:100%;
    height:160px;
}

作为主容器，因此容器适合页面的宽度（100％）

然后

.header-left {
    width:33%;
    display:inline-block;
}
.logo {
    width:409px; /* width of the logo */
    margin:10px auto 0 auto;
    display:inline-block;
}
.header-right {
    width:33%;
    display:inline-block;
}

表示容器中的3个div。

我需要页面中心的.logo div和其他2个div之间的区域，然后另外2个div在徽标div的任一侧。

logo div需要为409px，就像徽标的宽度一样。

出于某种原因它只是显示在左边，我无法理解为什么

Answer 1

如果您按如下方式排列标题HTML，则可以使用一种解决方案：

<header class="ex1">
    <div class="header-left">the left stuff </div>
    <div class="header-right">the right stuff</div>
    <div class="logo"><img src="http://placehold.it/409x138" ></div>
</header>

并应用以下CSS：

header {
    border: 1px solid blue;
    width: 100%;
    min-width: 800px;
    height: 160px;
    overflow: auto;
}
.ex1 .header-left {
    display:inline-block;
    width: 33%;
    max-width: 190px;
    background-color: gray;
    float: left;
}
.ex1 .logo {
    width: 409px; /* width of the logo */
    margin:10px auto 0 auto;
    border: 1px solid red;
}
.ex1 .logo img {
    display: block;
}
.ex1 .header-right {
    display:inline-block;
    width: 33%;
    max-width: 190px;
    background-color: gray;
    float: right;
}

基本上，你将左边的标题元素浮动到左边，右边的元素浮动到右边，并将徽标元素保持在正常的盒子流中心。

将min-width设置为允许固定徽标/横幅图片。

小提琴参考：http://jsfiddle.net/audetwebdesign/Esst8/

Answer 2

在这种情况下，如果409px超过总宽度的34％会发生什么？它破了。

考虑重写你的html，它不会以这种方式工作。

Answer 3

重组并使用`Float`

要获得您想要的内容，最好的办法是重新构建HTML并确保在min-width上设置body。这样的事情（as seen in this fiddle）：

<强> HTML

<div id="header">
        <div class="header-left">LEFT</div>
      <div class="header-right">RIGHT</div>
        <div class="logo"><img src="images/logo" width="409" height="138" /></div>
</div>

基本CSS

body {
    min-width: 600px; /* some minimum greater than 409px */
}

.header-left {
    float: left;
    width: 50%;
    margin-right: -204.5px;
    border-right: 204.5px solid transprent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.logo {
    width:409px; /* width of the logo */
    margin:10px auto 0 auto;
    position: relative;
    z-index: 1;
}
.header-right {
    float: right;
    width: 50%;
    margin-left: -204.5px;
    border-left: 204.5px solid transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

更新以使其“在中心位置”运行，您必须考虑min-width设置中两个侧面部分中较大的部分。因此，如果您在每一侧都放置一些固定宽度的元素，那么您需要根据这个公式中的较大的两个边元素来计算min-width：

（（较大的侧边px）x 2）+ 409px标识=最小宽度

不要忘记在调整大小时根据需要考虑边框等。

Answer 4

使用display: inline代替display: inline-block作为您的div

演示：http://jsfiddle.net/R65fA/1/

我刚刚阅读了@Milche Patern的回答，并注意到你的子元素使用了百分比和固定宽度。这真是个糟糕的主意。你最好重写一下，使它成为标准。

Answer 5

#header{ width:100%}
.header-left {
    width:33%;
    float:left;
}
.logo {
    width:34%; /* width of the logo */
    margin:10px 0px 0px;
    float:left; height:138px;
}
.header-right {
    width:33%;
    float:left;
}
.clr{ clear:both;}

<强> HTML：

<div id="header">
     <div class="header-left">LEFT</div>
     <div class="header-right">RIGHT</div>
     <div class="logo"><img src="images/logo" width="409" height="138" /></div>
     <div class="clr"></div>
</div>

对齐3个div内联

5 个答案:

重组并使用`Float`

对齐3个div内联

5 个答案:

重组并使用Float

重组并使用`Float`